@charset "utf-8";


/*
Theme Name: neworiginal_Theme
Theme URI: non
Description: neworiginal_Theme
Author: 加茂彪汰 / 長井奈々
Author URI: non
Version: バージョン 1.0
*/


body {
    width: 100%;
    margin: 0 auto;
}


/* ローディング画面 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
}

.loading-logo img {
    width: 200px;
    opacity: 0;
    animation: logoFade 2s ease-out forwards;
}

.loading-bar {
    width: 30%;
    height: 5px;
    background-color: #ccc;
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
    display: none;
}

.progress {
    height: 100%;
    width: 0;
    background-color: #00a0dc;
    animation: loadProgress 3s linear infinite;
}

@keyframes logoFade {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes loadProgress {
    0% {
        width: 0;
    }
    50% {
        width: 60%;
    }
    100% {
        width: 100%;
    }
}

/* ローディング画面が隠れる */
#loading-screen.hidden {
    display: none;
}



#load {
  position:absolute;
  width:600px;
  height:56px;
  left:50%;
  top:40%;
  margin-left:-300px;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

#load div {
  position:absolute;
  width:20px;
  height:56px;
  opacity:0;
  font-family:Helvetica, Arial, sans-serif;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:#35C4F0;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
  35% {
    left: 41%; 
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg);
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-moz-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-webkit-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%;
    -webkit-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}

@-o-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}



/* フッター部分一時的にこちらに避難 */


.company_Box .company_Box_inner img {
    border-radius: 4px;
}

.mein {
    position: relative;
}

.slider {
  margin: 0 auto;
  max-width: 500px;
  width: 80%;
}
.slider-img {
  margin: 0 5px;
}
.slider-img img {
  height: auto;
  width: 100%;
}





/* 404 */
#page404 {
    width: 100vw;
    height: 100vh;
    position: relative;
}
#page404 p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* ホバーしたら下からスライドで黒くなる */

.image-container {
    position: relative;
    overflow: hidden;
    width: 43%;
    margin: 10px 0 0 0;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay {
        display: none;
    }

.image-container:hover .overlay {
    opacity: 1; /* ホバー時にオーバーレイを表示 */
}

/* sigle.php */

#SinglePage {
    margin: 80px auto;
    padding: 0 6%;
    max-width: 600px;
}

#SinglePage .category-exhibition {
    background: none!important;
    color: #333!important;
}

#SinglePage .category-news {
    background: none!important;
    color: #333;
}

.article-head .article-info {
  margin-bottom: .5rem;
}
 
.article-head .article-info .article-cat {
  display: inline-block;
  vertical-align: middle;
}
 
.article-head .article-info .article-cat a {
  font-size: .875rem;
  line-height: 1;
  display: inline-block;
  margin-right: .5rem;
  padding: .375rem .5rem;
  text-decoration: none;
  color: #fff;
  background-color: #03162f;
}
 
.article-head .article-info .article-date {
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  color: #888;
}
 
.article-head .article-info .article-date i {
  font-size: 1.25rem;
  position: relative;
  top: .25rem;
}
 
.article-head h1 {
  font-size: 2.4rem;
  margin: 0 0 2rem;
  letter-spacing: 1px;
}
 
.article-head .article-img {
  margin-bottom: 2rem;
}
 
.article-head .article-img img {
  display: block;
  margin: 0 auto;
}

.article-main .editor-content {
    font-size: 1.4rem;
}
 
.article-foot .article-tag {
  margin-bottom: 1rem;
  text-align: right;
}
 
.article-foot .article-tag ul {
  list-style: none;
}
 
.article-foot .article-tag ul li {
  font-size: .9rem;
  display: inline-block;
  margin-right: .5rem;
  vertical-align: middle;
}
 
.article-foot .article-tag ul li:last-child {
  margin-right: 0;
}
 
.article-foot .article-tag ul li a {
  line-height: 1;
  display: block;
  padding: .25rem .5rem;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
}
 
.article-foot .article-tag ul li a:hover {
  opacity: .6;
}
 
.article-foot .article-author {
  font-weight: 500;
  line-height: 1;
  text-align: right;
  vertical-align: middle;
}
 
.article-foot .article-author i {
  font-size: 1.25rem;
  position: relative;
  top: .25rem;
}
 
@media(max-width: 480px) {
  .article-head h1 {
    font-size: 1.75rem;
  }
}


#ArchivePage {
    margin: 80px 0;
    padding: 0 6%; 
}

/* 共通 */


    .category-news {
        background: #32a8e3;
        color: #fff;
        font-weight: 600;
    }

    .category-exhibition {
        background: #e3325a;
        color: #fff;
        font-weight: 600;
    }


    #News_only {
        margin: 80px auto;
        padding: 0 4%;
    }

/* footer共通PageTop */


    #News_only p {
        font-size: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem);
    }



    /* デザインC(PC) */
    @media only screen and (min-width: 1024px) {
    /* PC用レイアウト 1024px以上の範囲に収めるデザインはこの中に記述 */

         #SinglePage {
            max-width: 768px;
            margin: 240px auto;
        }

        .article-main .editor-content {
            font-size: 1.6rem;
        }

        #ArchivePage {
            max-width: 768px;
            margin: 240px auto;
        }
 

    }





/* --------------------------------
 * base
 * -------------------------------- */
html {
  font-size: 62.5%;
}

body {
  color: #333;

  font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: 0.18em;
  position: relative;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a:link, a:visited, a:hover, a:active {
  color: #333;
  text-decoration: none;
}


time {
  font-weight: bold;
  text-align: center;
  display: block;
  font-size: 12px;
  color: #333;
  padding: 8px;
  right; 0;
  left: 11%;
  margin: 20px 0 0 40px; 
}

header {
  position: relative;
  z-index: 800;
  padding: 23px 0 0 0;
}

#Home {
    position: relative;
    top: -45px;
}

#Home h2 {
  font-size: clamp(3.6rem, 3.455rem + 0.73vw, 4rem);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  background: linear-gradient(180deg, #005396 0%, #00a0dc 72%, #005396 100%);
  background: -webkit-linear-gradient(-90deg, #005396 0%, #00a0dc 72%, #005396 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.1em;
}

.tiTle span {
    font-size: 14px;
    color: #666;
    text-align: center;
    display: block;
    text-align: left;
}

/* --------------------------------
 * font
 * -------------------------------- */

.zen-kaku gothic new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/* --------------------------------
 * parts
 * -------------------------------- */

 /*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

.btnarrow4:hover{
  padding: 0 10px 0 10px;
  transition: all 1s ease; 
}

/*矢印と下線の形状*/
.btnarrow4::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: -10%;
    top: 12px;
    width: 25%;
    height: 1px;
    background: #005396;
    transition: all .3s;
}

.btnarrow4::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: -13%;
    width: 8px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}


.cate_color {
    list-style: none;
    width: 17em;
}

.cate_color li {
    color: #fff;
    padding: 1px 4px;
    display: inline-block;
    border-radius: 4px;
    margin: 0 80px 2px 0;
    padding: 0 4%;
}