@charset "utf-8";

/* =======================================

CommonElements & TOP

======================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex {
display: flex;
}
.pc_none {
display: none;
}
html {
scroll-behavior:smooth
}

body {
color: #000;
background: #ffffff;
font-size: 14px;
position: relative;
letter-spacing: 0.1em;
font-family: -apple-system, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ヘッダー固定＆アニメーション */
#header_nav {
        display: none;
      }
      
      /* スクロールダウンで隠す */
      
      /* スクロール時に背景白・リンク黒 */
      #header_nav.scrolled {
        background-color: #fff;
      }
      
      /* リンクの色：通常は白、scrolled時は黒 */
      #header_nav a {
        color: #fff;
        font-size: 16px;
        transition: color 0.3s ease;
        font-weight: bold;
      }
      #header_nav.scrolled ul.flex li a {
        color: #000;
        padding: 8px 25px;
      }
      
      /* ul.flex のリセット（必要に応じて） */
      #header_nav ul.flex {
        justify-content: center;
        position: relative;
        align-items: end;
      }
      #header_nav ul.flex li a {
        display: block;
        padding:40px 25px;
      }
/* 
      #header_nav ul.flex li:first-child a {
        padding:0;
        position: absolute;
        left: 40px;
        top: 20px;
      } */
#mv {
/* max-width: 1140px;
width: 100%; */
height: 100vh;
margin: auto;
position: relative;
margin-bottom: 50px;
}

.mv_inner {
/* max-width: 1140px; */
width: 100%;
margin: auto;
position: relative;
overflow: hidden;
}

.mv_inner img {
        width: 100%;
        object-fit: cover;
        margin-top: -100px;
}


#mv h1 {
position: absolute;
z-index: 999;
bottom: 35%;
right: 0;
left: 0;
font-size: 64px;
width: 1100px;
margin: auto;
color: #fff;
text-align: right;
}
#mv video {
        width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
z-index: 1;
margin: auto;
}

#mv ul.flex {
justify-content: center;
position: absolute;
left: 0;
right: 0;
bottom: -30px;
z-index: 999;
}


#mv ul.flex li {
width: 22%;
margin: 0 10px;
background: #fff;
display: block;
padding: 24px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #47403B;
border-radius: 50px;
}


.sec_cmn.flex {
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
align-items: center;

}


#sec01 .sec_cmn.flex {
        display: block;
padding: 50px 0;
text-align: center;
}

#sec01 h2 {
font-size: 32px;
margin-bottom: 50px;
font-weight: bold;
text-align: center;
}



#sec01 p {
line-height: 3;
}

#sec01 h2 span {
font-weight: 600;
font-size: 48px;
}
#sec01 h2 span ruby {
ruby-position: over;
font-weight: 100;
ruby-align: center;
margin-right: -30px;
}

#sec01 h2 span ruby rb {
letter-spacing: 0.2em;
font-weight: 600;
font-size: 48px;
}
#sec01 h2 span ruby rt {
font-size: 16px;
letter-spacing: 1em;
margin-bottom: 10px;
}

.sec01_in {}

.movie {
        text-align: center;
        margin: 100px 0 20px 0;
}



.movie h3 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 50px;
}

.movie video {
        width: 96%;
        height: auto;
        display: block;
        margin: auto;
}

/**********
CTA
**********/

.cta_area {
background:url(../img/sec02_bg.png) no-repeat center top;
background-size:cover;
padding: 100px 0;
margin-bottom: 10px;
}

.cta_area ul.flex {
width: 90%;
margin: auto;
justify-content: center;
margin-bottom: 40px;
}

.cta_area ul.flex li {
color: #fff;
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 60px;
/* ボックスの高さと同一、または150% */
text-shadow: 10px 10px 10px #000000;

}

.cta_area ul.flex li:first-child {
font-size: 32px;
}
.cta_area ul.flex li:last-child {
font-size: 24px;
margin-left: 30px;
letter-spacing: 0.15em;
}

.cta_area ul.flex li span {
font-size: 32px;
}

.cta_area a {
background: rgba(255, 136, 0, 0.7);
color: #fff;
font-size: 24px;
text-align: center;
padding: 20px 0;
width: 355px;
display: block;
margin: auto;
border-radius: 100px;
font-weight: bold;
}
.cta_area a span {
font-size: 32px;
}


/* スライダーの外枠 */
.slider {
overflow: hidden;
width:100%;
margin: 0 auto;
}

/* スライド全体（2セット分） */
.slider-track {
display: flex;
gap: 15px;
/* 画像 4 枚分＋間隔でループさせる */
animation: scroll 30s linear infinite;
}
/* マウスホバーで一時停止 */
/* .slider-track:hover {
animation-play-state: paused;
} */

/* 画像サイズ指定 */
.slider-track img {
width: 436px;
height: 291px;
object-fit: cover;
display: block;
}

/* キーフレーム：全体を左に移動 */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-1 * ((436px + 15px) * 4)));
}
}


#sec02 {
padding: 100px 0;
}

#sec02 .sec_cmn {
}

#sec02 h2 {
text-align: center;
font-size: 36px;
line-height: 2.2em;
font-weight: bold;
position: relative;
margin-bottom: 100px;
}




#sec02 h2 span {
font-size:38px;
}

#sec02 h2 span:first-child,
#sec02 h2 span:last-child {
color:#00BBFF ;
}

#sec02 h3 {
font-size: 24px;
text-align: center;
margin-bottom: 40px;
font-weight: bold;
}

#sec02 h3 span:first-child {
font-size: 24px;
}
#sec02 h3 span:last-child {
font-size: 24px;
color: #FF8800;
}

.sec02_in .sec_cmn.flex {
justify-content: center;
align-items: flex-start;
}

.sec02_in .sec_cmn.flex .sec02_box {
text-align:center;
margin-bottom:30px;
width: 337px;
}

.sec02_in .sec_cmn.flex .sec02_box img {
        width: 100%;
        height: 254px;
        object-fit: cover;
}

.sec02_in .sec_cmn.flex .sec02_box:nth-child(2) {
margin-left: 42px;
margin-right: 42px;
}

.sec02_in .sec_cmn.flex .sec02_box:nth-child(4),
.sec02_in .sec_cmn.flex .sec02_box:nth-child(5) {
margin-left: 21px;
margin-right: 21px;
}

.sec02_in .sec_cmn.flex .sec02_box dt {
font-size: 24px;
padding: 20px 0;
font-weight: bold;

}



#sec03 {
        
}

.sec03_wrap.flex {
justify-content: space-between; /* 横方向の中央寄せ */
align-items: center;     /* 縦方向の中央寄せ */
margin-bottom: 140px;
}

.sec03_wrap.flex .text_area p {
        line-height: 3em;
}

/* 右のテキストエリア：中央に置いてから550px右へ */
.sec03_wrap.flex:first-child .text_area {
width: 61%;           /* 必要に応じて */
order: 2;
}
.sec03_wrap.flex:last-child .text_area {
width: 61%;
}
.sec03_wrap.flex:first-child .text_area .text_area_in {
width: 96%;
text-align: right;
}
.sec03_wrap.flex:last-child .text_area .text_area_in {
width: 90%;
text-align: left;
margin: auto;
}

.sec03_wrap.flex:first-child .text_area_in img {
margin-bottom: 30px;
margin-right:150px;
}

.sec03_wrap.flex:first-child .text_area_in h2 {
font-size: 26px;
margin-bottom: 40px;
position: relative;
font-weight:bold;
}
.sec03_wrap.flex:last-child .text_area_in h2 {
font-size: 26px;
margin-bottom: 40px;
font-weight: bold;
}


.text_area_in h2 span {
color: #FF6A00;
}

.text_area_in h2 span:first-child {
/* font-size: 32px; */
}

.text_area_in p {
line-height: 2.2em;
}

/* 左の画像：中央に置いてから幅100%分左へ */
.sec03_wrap.flex:first-child .img_area {
width: 38%;
order: 1;
border-radius:0 20px 20px 0;
}
.sec03_wrap.flex:first-child .img_area img {
width: 100%;
object-fit: cover;
border-radius:0 20px 20px 0;
height: 465px;
}
.sec03_wrap.flex:last-child .img_area {
width: 38%;
border-radius:20px;
}

.sec03_wrap.flex:last-child .img_area img {
width: 100%;
object-fit: cover;
border-radius:20px 0 0 20px;
height: 465px;

}


#sec04 {
        margin-bottom: 100px;
}



.sec04_in {
        background: url(../img/sec04_in_bg.jpg) no-repeat center;
        background-size: cover;
}

.sec04_in .sec_cmn {
        width: 1100px;
        margin: auto;
}

.sec04_in {
        padding: 200px 0;
}

.sec04_in p {
        text-align: center;
        line-height: 2.2em;
        margin-bottom: 50px;
        font-size: 24px;
        color: #fff;
        font-weight: bold;
        text-shadow: 10px 10px 10px #000000;
}



.sec04_in01.sec_cmn.flex {
        justify-content: center;
        margin-bottom: 60px;
}

.sec04_in01.sec_cmn.flex img {
        transform: translateX(-100px);
}

.sec04_in01.sec_cmn.flex dl {}

.sec04_in01.sec_cmn.flex dt {
    color: #00BBFF;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.sec04_in01.sec_cmn.flex dd {
        margin-bottom: 20px;
        line-height: 2.2em;
}




.sec04_in02.sec_cmn.flex {
        justify-content: center;
}

.sec04_in02.sec_cmn.flex img {
        transform: translateX(-100px);
}

.sec04_in02.sec_cmn.flex dl {}

.sec04_in02.sec_cmn.flex dt {
    color: #00BBFF;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.sec04_in02.sec_cmn.flex dd {
        margin-bottom: 20px;
        line-height: 2.2em;
}


.sec04_in03_wrap {
        width: 96%;
        margin: auto;
        background: #F3F3F3;
        padding: 130px 50px 10px 50px;
        margin-top: 100px;
}

.sec04_in03_wrap h2 {
        color: #FF6A00;
}

.sec04_in03 {
        margin-bottom: 150px;
}
.sec04_in03 p.cta_btn {
        display: block;
        width: 480px;
        color: #fff;
        font-size: 24px;
        text-align: center;
        padding: 15px 0;
        background: #FF6A00;
        border-radius: 75px;
        margin: 0 auto 100px;
}

.sec04_in03 h2 {
        font-size: 28px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 80px;
}

.sec04_in03 ul.flex {
        justify-content: space-between;
        margin-bottom: 60px;
}

.sec04_in03 ul.flex li {
width: 300px;
text-align: center;
}

.sec04_in03 ul.flex li img {
        margin-bottom: 20px;
        width: 100%;
        height: 220px;
        object-fit: cover;
}
.sec04_in03 dl,
.sec04_in03 dl.flex {
       background: #fff;
       flex-wrap: wrap;
       width: 96%;
       margin: 0 auto 60px;
       padding: 30px 60px;
}

.sec04_in03 dl.flex dt {
        width: 40%;
        padding:15px 0 15px 0;
}
.sec04_in03 dl.flex dd {
        width: 60%;
        padding:15px 0 15px 0;
        line-height: 2.2em;
}

.sec04_in03 dl:last-child {
}

.sec04_in03 dl:last-child dt {
        font-weight: bold;
        margin-bottom: 20px;
}
.sec04_in03 dl:last-child dd {
        margin-bottom: 20px;
}

.sec04_in03 ul.flex:nth-child(2) {
        justify-content: center;
        align-items:start;
}

.sec04_in03 ul.flex:nth-child(2) li:first-child {
        width: 304px;
}

.sec04_in03 ul.flex:nth-child(2) li:first-child p {
        text-align: left;
}

.sec04_in03 ul.flex:nth-child(2) li:first-child img {

}

.sec04_in03 ul.flex:nth-child(2) li:last-child {
        width: 473px;
        background: #fff;
        line-height: 3.2em;
        text-align: left;
        padding: 20px 40px 20px 40px;
        margin-left: 20px;
}
.sec04_in03:nth-child(3) {
        margin-bottom: 50px;
}

.sec04_in03:nth-child(3) ul.flex {
        justify-content: center;
        margin-bottom: 20px;
}

.sec04_in03:nth-child(3) ul.flex li {
        margin: 0 30px;
}

.sec04_in03:nth-child(3) dl.flex {}

.sec04_in03:nth-child(3) dl.flex dt {
        width: 65%;
}
.sec04_in03:nth-child(3) dl.flex dd {
        width: 35%;
}



#sec05 {
        padding: 100px 0;
}

#sec05 h2 {
        font-size: 24px;
        text-align: center;
        letter-spacing: 0.1em;
        margin-bottom: 50px;
        font-weight: bold;
}


#sec05 p {
        text-align: center;
        margin-bottom: 100px;
        font-size: 14px;
}

#sec05 img {
        width: 96%;
        display: block;
        margin: auto;
}

#sec06 {
        margin-bottom: 60px;
}

.sec06_tlt {
        background: #FF6A00;
        padding: 50px 0 1px 0;
}
#sec06 h2 {
        font-size: 32px;
        text-align: center;
        position: relative;
        letter-spacing: 0.1em;
        margin-bottom: 50px;
        color: #fff;
        font-weight: bold;
}

#sec06 p {
        text-align: center;
        line-height: 3em;
        margin-bottom: 60px;
        color: #fff;
        font-size: 16px;
}

.sec06_img ul.flex {
  justify-content: space-between;
  flex-wrap: wrap;
}

.sec06_img ul.flex li {
        width: 25%;
}
.sec06_img ul.flex li img {
        width: 100%;
        border: 1px solid #fff;
}


#sec07 {
        width: 100%;
        margin: auto;
        background: #F3F3F3;
        text-align: center;
        padding: 60px;
        position: relative;
        margin-bottom: 100px;
}


.sec07_in {
        width: 100%;
        margin: auto;
}

.sec07_in h2 {
        font-size: 32px;
        margin-bottom: 50px;
        font-weight: bold;
}

.sec07_in h2 span {
        color: #00BBFF;
}

.sec07_in dl.flex {
        justify-content: center;
text-align: left;
align-items: start;
line-height: 3em;
margin-bottom: 40px;

}

.sec07_in dl.flex dt {
width: 100px;
}
.sec07_in dl.flex dd.yugothic {
        color: #FF6A00;
        margin-top: 0px;
        font-size: 20px;
        font-weight: bold;
        width: 100px;
}
.sec07_in dl.flex dd {
        width: 450px;
}

.sec07_in dl.flex dd a {
        color: #fff;
        background: #FF6A00;
        border-radius: 40px;
        text-align: center;
        padding:15px 30px;
        font-size: 16px;
}

.sec07_in dl.flex dd a span {
        font-size: 20px;
}



#sec08 {
}

#sec08 img {
        width: 96%;
        height: auto;
        display: block;
        margin: 0 auto 50px;
}

.content {
padding: 160px 20px 60px 20px;
border-radius: 170px 170px 0 0;
margin-bottom: 60px;
}
.content h2 {
        font-size: 24px;
        position: relative;
        text-align: center;
        margin-bottom: 40px;
        font-weight: bold;
}

.content h2 span {
        font-size: 32px;
}


.content dl {
        width: 650px;
        margin: auto;
}

.content dt {
        color: #00BBFF;
}

.content dd:last-child {
        margin-top: 20px;
}

.content_in {
        width: 1100px;
        margin: 50px auto 50px;
        background: #fff;
        border-radius: 20px;
        padding: 50px 100px;
}

.content_in h2 {
        font-size: 24px;
}

.content_in h2 span {
        font-size: 32px;
}


.content_in h2:before {
        display: none;
}

.content_in dl.flex {
        width: 770px;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-around;
}

.content_in dl.flex dt {
        padding: 40px;
        margin: 0;
        width: 227px;
        border-bottom: 1px solid #00BBFF;
        text-align: center;
}

.content_in dl.flex dd {
        width: 490px;
        padding: 40px;
        margin: 0;
        border-bottom: 1px solid #000;
        text-align: left;
        line-height: 2em;
}

.content_in dl.flex dd span {
        font-size: 16px;
}
.no-image {
        width: 1100px;
        height: 300px;
        display: block;
        margin: auto;
        background: #ccc;
        margin-bottom: 30px;
}



.map {
width: 96%;
margin: auto;
}

.map iframe {
        width: 100%;
        height: 500px;
}


.sec09 {
        height: 200vh;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:3rem;
        background-image: url(../img/sec09_bg.png);
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* パララックス効果 */
}


.sec09_in {
        text-align: center;
        position: relative;
}
.sec09_in h2 {
        font-size: 40px;
        margin-bottom: 60px;
        font-weight: bold;
        text-shadow: 0px 0px 10px #0E5282;
}

.sec09_in p {
       font-size: 20px;
       margin-bottom: 30px;
       font-weight: bold;
       text-shadow: 0px 0px 10px #0E5282;
}

.sec09_in p a {
        color: #fff;
        text-shadow: 0px 0px 10px #0E5282;

}


a.cta_btn {
        background: rgba(255, 136, 0, 0.7);
        color: #fff;
        font-size: 24px;
        text-align: center;
        padding: 20px 0;
        width: 355px;
        display: block;
        margin: 100px auto 0;
        border-radius: 100px;
        font-weight: bold;
}
a.cta_btn span {
        font-size: 32px;
}



footer {
        margin-top: 50px;
        padding: 100px 0 0px 0;
        background: #000;
        position: relative;
}

.f_logo {
        width: 300px;
        margin: auto;
}

.f_logo img {
        width: 100%;
        height: 70px;
}


.f_navi ul.flex {
        justify-content: center;
}

.f_navi ul.flex li {
        padding: 20px;
}

.f_navi ul.flex:last-child {
        margin-top: 200px;
}

.f_navi ul.flex:last-child li {
        padding: 10px;
}

.f_navi ul.flex li a {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
}

.totop {
        position: absolute;
        right: 20px;
        top: 50px;
}

.plus_n_area {
        background: #fff;
        position: absolute;
        left: 30px;
        bottom: 30px;
        padding: 20px;
}

.plus_n_area img {
        margin-bottom: 20px;
}

.plus_n_area span {
        display: block;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
}