@charset "utf-8";
/* CSS Document */

/* sm Loading */
#loading {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:rgba(0,63,146,1.0);
text-align:center;
}

#loading_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
}

/* md Loading */
@media screen and (min-width: 768px) {
#loading_logo {
width: 50%;
}
}

/* lg Loading */
@media screen and (min-width: 1024px) {
#loading_logo {
width: 30%;
}
}

/*sm　hero*/
#hero_smmd {
position: relative;
height: 190px;
background-color: rgba(28,121,175,1.0);
overflow: hidden;
margin-top: -40px;
}

#hero_smmd-movie{
position: absolute;
inset: 0;        /* #hero_smmd 全面 */
overflow: hidden;
border-radius: 0 0 50px 0;
z-index: 0;
}

#hero_smmd-movie .bg_video.cover{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}

/* iframe を中央に配置。サイズは画面比で切り替え */
#hero_smmd-movie .bg_video.cover iframe{
position: absolute;
top: 50%;
left: 50%;
border: 0;
transform: translate(-50%, -50%);
/* 余白チラつき防止のため、初期値は親いっぱい相当 */
width: 100%;
height: 100%;
}

/* 画面が「横に広い」（16:9 以上）とき：
   幅 100vw / 高さ 56.25vw（= 9/16 * 100）で、常に上下をオーバーさせる */
@media (min-aspect-ratio: 16/9) {
#hero_smmd-movie .bg_video.cover iframe{
width: 100%;
height: calc(100% * 9 / 16);  /* 親幅から16:9高さを算出 */
}
}

/* 画面が「縦に長い」（16:9 より細長い）とき：
   高さ 100vh / 幅 177.78vh（= 16/9 * 100）で、常に左右をオーバーさせる */
@media (max-aspect-ratio: 16/9) {
#hero_smmd-movie .bg_video.cover iframe{
height: 100%;
width: calc(100% * 16 / 9);   /* 親高から16:9幅を算出 */
}
}

#hero_lg{
display: none;
}

/*sm　hero*/
@media screen and (min-width: 340px) {
#hero_smmd {
height: 200px;
}
}

/*sm　hero*/
@media screen and (min-width: 355px) {
#hero_smmd {
height: 210px;
}
}

/*sm　hero*/
@media screen and (min-width: 375px) {
#hero_smmd {
height: 220px;
}
}

/*sm　hero*/
@media screen and (min-width: 390px) {
#hero_smmd {
height: 235px;
}
}

/*sm　hero*/
@media screen and (min-width: 420px) {
#hero_smmd {
height: 250px;
}
}

/*sm　hero*/
@media screen and (min-width: 445px) {
#hero_smmd {
height: 270px;
}
}

/*sm　hero*/
@media screen and (min-width: 480px) {
#hero_smmd {
height: 290px;
}
}

/*sm　hero*/
@media screen and (min-width: 515px) {
#hero_smmd {
height: 300px;
}
}

/*sm　hero*/
@media screen and (min-width: 530px) {
#hero_smmd {
height: 320px;
}
}

/*sm　hero*/
@media screen and (min-width: 570px) {
#hero_smmd {
height: 340px;
}
}

/*sm　hero*/
@media screen and (min-width: 600px) {
#hero_smmd {
height: 360px;
}
}

/*sm　hero*/
@media screen and (min-width: 630px) {
#hero_smmd {
height: 380px;
}
}

/*sm　hero*/
@media screen and (min-width: 675px) {
#hero_smmd {
height: 400px;
}
}

/*sm　hero*/
@media screen and (min-width: 710px) {
#hero_smmd {
height: 430px;
}
}

/*md　hero*/
@media screen and (min-width: 768px) {
#hero_smmd{
height: 460px;
}
}

/*md　hero*/
@media screen and (min-width: 810px) {
#hero_smmd{
height: 500px;
}
}

/*md　hero*/
@media screen and (min-width: 885px) {
#hero_smmd{
height: 540px;
}
}

/*md　hero*/
@media screen and (min-width: 950px) {
#hero_smmd{
height: 560px;
}
}

/*md　hero*/
@media screen and (min-width: 990px) {
#hero_smmd{
height: 580px;
}
}

/*lg　hero*/
@media screen and (min-width: 1024px) {
#hero_smmd{
display: none;
}

#hero_lg{
display: block;
margin-top: -72px;
position: relative;
background-color: rgba(28,121,175,1.0)
}

#hero_lg-movie{
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;/* 16:9を維持（モダンブラウザ）*/
border-radius: 0 0 250px 0;
}

/* フォールバック（IEなど） */
@supports not (aspect-ratio: 1 / 1) {
#hero_lg-movie{
position: relative;
height: 0;
padding-bottom: 56.25%; /* 9/16 */
overflow: hidden;
}
}

#hero_lg-movie .bg_video.cover{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none; /* 背景なので操作不可 */
}

#hero_lg .bg_video.cover iframe{
position: absolute;
inset: 0;
width: 100%;/* iframeは親いっぱい */
height: 100%;/* iframeは親いっぱい */
border: 0;
}
}


/* sm top_introduction */
#top_introduction{
position: relative;
border-radius: 0 0 0 50px;
background: url("../img/img_city.jpg") center center/cover no-repeat;
}

#top_introduction:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 5px;
width: 100px;
height: 29px;
background: url(../img/line_white.svg)center center/cover no-repeat;
}

#top_introduction .inner_sm{
padding: 50px 0;
font-weight: bold;
}

#top_introduction h2{
margin-bottom: 15px;
font-size: 2.0rem;
line-height: 1.4;
}


/* md introduction */
@media screen and (min-width: 768px) {
#top_introduction{
background: url("../img/img_city.jpg")center 75% /cover no-repeat;
}

#top_introduction:after{
width: 150px;
height: 43px;
}
}


/* lg introduction */
@media screen and (min-width: 1024px) {
#top_introduction{
border-radius: 0 0 0 250px;
background: url("../img/img_city.jpg") center 70%/cover no-repeat;
text-align: center;
}

#top_introduction:after{
width: 260px;
height: 74px;
}

#top_introduction .inner_lg{
padding: 100px 0;
font-weight: bold;
}

#top_introduction h2{
font-size: 2.6rem;
}
}


/* lg introduction */
@media screen and (min-width: 1280px) {
#top_introduction{
background: url("../img/img_city.jpg") center 80%/cover no-repeat;
}
}


/* sm top_news */
#top_news{
margin: 50px auto;
text-align: center;
}

#top_news h3{
display: inline-block;
margin-bottom: 5px;
border-bottom: 1px solid rgba(0,63,146,1.0);
font-size: 1.4rem;
}

#top_news img{
height: 60px;
margin-bottom: 15px;
}

#top_news dl{
text-align: left;
}

#top_news dl dt{
font-weight: bold;
}

#top_news dl dd{
position: relative;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0,63,146,1.0);
line-height: 1.4;
}

#top_news dl dd:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 15px;
background: url(../img/line_blue.svg)center center/cover no-repeat;
}

#top_news dl dt a:link,
#top_news dl dt a:visited {
color: rgba(0,63,146,1.0);
}

#top_news dl dd a:link,
#top_news dl dd a:visited {
color: rgba(60,60,60,1.0);
}


/* lg top_news */
@media screen and (min-width: 1024px) {
#top_news{
margin: 100px auto;
}

#top_news h3{
font-size: 2.4rem;
}

#top_news img{
height: 100px;
margin-bottom: 30px;
}

#top_news dl {
display: flex;
flex-wrap: wrap;
width: 100%;
}

#top_news dl dt{
width: 15%;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0,63,146,1.0);
}

#top_news dl dd{
width: 85%;
margin-bottom: 30px;
}
}


/* sm top_about */
#top_about{
margin-bottom: 50px;
background-image: url("../img/bg_wave03.jpg"),url("../img/bg_wave03.jpg");
background-repeat: no-repeat,no-repeat;
background-size: contain,contain;
background-position: center top,center bottom;
}

#top_about .stepup{
margin-bottom: 50px;
text-align: right;
}

#top_about .stepup div{
text-align: left;
}

#top_about .stepup img{
height: 60px;
margin-bottom: 15px;
}

#top_about .athome img{
height: 60px;
margin-top: 20px;
}

#top_about h3{
display: inline-block;
margin-bottom: 15px;
font-size: 2.0rem;
}

#top_about h3 span{
padding: 0 10px;
}

/*文字の上のレイヤーの動き*/
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration: 1.0s;
animation-fill-mode: forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
}

@keyframes bgextendAnimeBase{
from {
opacity:0;
}
to {
opacity:1;  
}
}

.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration: 1.0s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,63,146,1.0);
}
@keyframes bgLRextendAnime{
0% {
transform-origin: left;
transform: scaleX(0);
}
50% {
transform-origin: left;
transform: scaleX(1);
}
50.001% {
transform-origin: right;
}
100% {
transform-origin: right;
transform: scaleX(0);
}
}

/*右から左*/
.bgRLextend::before{
animation-name:bgRLextendAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,240,30,1.0);
}
@keyframes bgRLextendAnime{
0% {
transform-origin: right;
transform: scaleX(0);
}
50% {
transform-origin: right;
transform: scaleX(1);
}
50.001% {
transform-origin: left;
}
100% {
transform-origin: left;
transform: scaleX(0);
}
}

.bgappearTrigger,
.bgLRextendTrigger,
.bgRLextendTrigger{
opacity: 0;
}


/* lg top_about */
@media screen and (min-width: 1024px) {
#top_about{
margin-bottom: 100px;
background-image: url("../img/bg_wave03.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}

#top_about .stepup{
margin-bottom: 100px;
}

#top_about .stepup img{
height: 150px;
margin-bottom: -50px;
}

#top_about .athome img{
height: 150px;
}

#top_about h3{
font-size: 3.0rem;
}
}


/* sm top_interview top_charm */
#top_interview,
#top_charm{
position: relative;
text-align: center;
padding: 40px 0;
}

#top_interview{
border-radius: 0 50px 0 0;
}

#top_charm{
margin-top: 90px;
border-radius: 50px 0 0 0;
}

#top_interview:after,
#top_charm:after{
content: "";
display: inline-block;
position: absolute;
bottom: 0;
width: 70px;
height: 20px;
background: url(../img/line_white.svg)center center/cover no-repeat;
}

#top_interview:after{
left: 0;
}

#top_charm:after{
right: 0;
}

#top_interview h3,
#top_charm h3{
display: inline-block;
margin-bottom: 5px;
font-size: 1.4rem;
}

#top_interview h3{
border-bottom: 1px solid rgba(255,240,30,1.0);
}

#top_charm h3{
border-bottom: 1px solid rgba(0,63,146,1.0);
}

#top_interview .text_interview img,
#top_charm .text_charm img{
height: 60px;
margin-bottom: 15px;
}

#top_interview h4,
#top_charm h4{
margin-bottom: 20px;
font-weight: normal;
text-align: left;
}

#top_interview .ph_interview-top,
#top_charm .ph_charm-top{
width: 70%;
margin-bottom: 30px;
}

#top_interview .ph_interview-top{
border-radius: 0 0 20px 0;
}

#top_charm .ph_charm-top{
margin-left: auto;
border-radius: 0 0 0 20px;
}

/*写真の上のレイヤーの動き*/
.animation01,
.animation02{
position: relative;
overflow: hidden;
}

.animation01{
border-radius: 0 0 20px 0;
box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.6);
}

.animation02{
border-radius: 0 0 0 20px;
box-shadow: -10px 10px 0px 0px rgba(0, 0, 0, 0.6);
}

.animation01:before,
.animation02:before{
content: '';
display: block;
position: absolute;
top:0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
transform: translatex(-100%);
}

.animation01:before{
background-image: linear-gradient(90deg, rgba(0,63,146,1.0) 0%, rgba(255,240,30,1.0) 100%);
}

.animation02:before{
background-image: linear-gradient(90deg, rgba(255,240,30,1.0) 0%, rgba(0,63,146,1.0) 100%);
}

@keyframes showMask{
0%{
transform: translateY(-100%);
}
45%,50%{
transform: translate(0%);
}
100%{
transform: translateY(100%);
}
}
.animation.show::before{
animation: showMask 1s forwards;
}
.animation .photo-inner{
opacity: 0;
}
 @keyframes showElements{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

.animation.show .photo-inner{
animation: showElements .01s .6s forwards;
}

#top_interview .ph_interview-bottom,
#top_charm .ph_charm-bottom{
position: relative;
margin-top: 30px;
}

#top_interview ul,
#top_charm ul{
display: flex;
align-content: space-between;
position: absolute;
z-index: 1;
}

#top_interview ul{
right: 0;
}

#top_charm ul{
left: 0;
}

#top_interview ul li img,
#top_charm ul li img{
max-height: 100px;
}

#top_interview ul li img{
border-radius: 0 0 10px 0;
}

#top_charm ul li img{
border-radius: 0 0 0 10px;
}

#top_interview ul li:nth-child(1),
#top_charm ul li:nth-child(1){
margin-right: 10px;
}


/* sm top_interview top_charm */
@media screen and (min-width: 375px) {
#top_interview:after,
#top_charm:after{
width: 100px;
height: 29px;
}
}


/* md top_interview top_charm */
@media screen and (min-width: 768px) {
#top_interview,
#top_charm{
padding: 50px 0;
}

#top_charm{
margin-top: 100px;
}

#top_interview:after,
#top_charm:after{
width: 150px;
height: 43px;
}

#top_interview .interview_frame,
#top_charm .charm_frame{
display: flex;
align-items:flex-start;
}

#top_charm .charm_frame{
flex-direction: row-reverse;
}

#top_interview .inner_lg,
#top_charm .inner_lg,
#top_interview .ph_interview-top,
#top_charm .ph_charm-top{
width: 45%;
}

#top_interview .ph_interview-bottom,
#top_charm .ph_charm-bottom{
margin-top: 20px;
}

#top_interview ul li img,
#top_charm ul li img{
max-height: 130px;
}
}


/* lg top_interview top_charm */
@media screen and (min-width: 1024px) {
#top_interview,
#top_charm{
padding: 50px 0 60px;
}

#top_interview{
border-radius: 0 200px 0 0;
}

#top_charm{
margin-top: 150px;
border-radius: 200px 0 0 0;
}

#top_interview h3,
#top_charm h3{
margin-bottom: 15px;
font-size: 2.4rem;
}

#top_interview .text_interview img,
#top_charm .text_charm img{
height: 80px;
margin-bottom: 15px;
}

#top_interview h4,
#top_charm h4{
margin-bottom: 30px;
}

#top_interview .inner_lg,
#top_charm .inner_lg{
width: 40%;
margin-top: 20px;
}

#top_interview .ph_interview-top,
#top_charm .ph_charm-top{
width: 50%;
}

.animation01{
border-radius: 0 0 50px 0;
box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.6);
}

.animation02{
border-radius: 0 0 0 50px;
box-shadow: -20px 20px 0px 0px rgba(0, 0, 0, 0.6);
}

#top_interview .ph_interview-bottom,
#top_charm .ph_charm-bottom{
margin-top: -30px;
}

#top_interview ul li img,
#top_charm ul li img{
max-height: 170px;
}

#top_interview ul li img{
border-radius: 0 0 20px 0;
}
}


/* lg top_interview top_charm */
@media screen and (min-width: 1280px) {
#top_interview,
#top_charm{
padding: 50px 0 100px;
}

#top_charm{
margin-top: 200px;
}

#top_interview .inner_lg,
#top_charm .inner_lg{
margin-top: 50px;
}

#top_interview .ph_interview-bottom,
#top_charm .ph_charm-bottom{
margin-top: -70px;
}

#top_interview ul li img,
#top_charm ul li img{
max-height: 210px;
}
}


/* lg top_interview top_charm */
@media screen and (min-width: 1440px) {
#top_interview .inner_lg,
#top_charm .inner_lg{
margin-top: 80px;
}

#top_interview ul li img,
#top_charm ul li img{
max-height: 240px;
}
}


/* sm top_data */
#top_data{
margin-top: 90px;
padding: 40px 0;
border-radius: 50px 50px 0 0;
background: url("../img/bg_data.jpg") center center/cover no-repeat;
text-align: center;
}

#top_data .data_frame{
margin: 0 auto;
padding: 30px 0;
border-radius: 0 0 20px 20px;
background-color: rgba(255,255,255,0.5);
}

#top_data h3{
display: inline-block;
margin-bottom: 5px;
border-bottom: 1px solid rgba(0,63,146,1.0);
font-size: 1.4rem;
}

#top_data img{
height: 40px;
margin-bottom: 5px;
}


/* md top_data */
@media screen and (min-width: 768px) {
#top_data{
margin-top: 120px;
padding: 50px 0;
}

#top_data .data_frame{
width: 60%;
border-radius: 0 0 30px 30px;
}
}


/* lg top_data */
@media screen and (min-width: 1024px) {
#top_data{
margin-top: 150px;
border-radius: 200px 200px 0 0;
background: none;
background-color: rgba(240,240,240,1.0);
}

#top_data .data_frame_lg{
width: 80%;
margin: 0 auto;
padding: 30px 0;
border-radius: 0 0 30px 30px;
background: url("../img/bg_data.jpg") center center/cover no-repeat;
}

#top_data .data_frame{
padding: 50px 0;
border-radius: 0 0 30px 30px;
transition: 0.3s;
}

#top_data .js_data.js_hover{
background-color: rgba(255,255,255,1.0);
}

#top_data img{
height: 60px;
}
}


/* lg top_data */
@media screen and (min-width: 1280px) {
#top_data{
margin-top: 200px;
}
}


/* sm top_menu */
#top_menu{
background: url("../img/bg_wave02.jpg") center center/cover no-repeat;
text-align: center;
}

#top_menu ul{
padding: 30px 0;
}

#top_menu li{
padding: 30px 0;
background-color: rgba(255,255,255,0.5);
}

#top_menu li:nth-child(1){
margin-bottom: 30px;
border-radius: 20px 0 0 0;
}

#top_menu li:nth-child(2){
border-radius: 0 0 20px 0;
}

#top_menu h3{
display: inline-block;
margin-bottom: 5px;
border-bottom: 1px solid rgba(0,63,146,1.0);
font-size: 1.4rem;
}

#top_menu img{
height: 40px;
margin-bottom: 5px;
}


/* sm top_menu */
@media screen and (min-width: 390px) {
#top_menu img{
height: 50px;
}
}


/* md top_menu */
@media screen and (min-width: 768px) {
#top_menu{
background: url("../img/bg_wave01.jpg") center center/cover no-repeat;
}

#top_menu ul{
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0;
}

#top_menu li{
width: 48%;
padding: 30px 0;
background-color: rgba(255,255,255,0.5);
}

#top_menu li:nth-child(1){
margin-bottom: 0px;
border-radius: 30px 0 0 0;
}

#top_menu li:nth-child(2){
border-radius: 0 0 30px 0;
}

#top_menu img{
height: 40px;
}
}


/*lg  top_menu */
@media screen and (min-width: 1024px) {
#top_menu ul{
padding: 50px 0;
}

#top_menu li{
width: 45%;
padding: 50px 0;
transition: 0.3s;
}

#top_menu .js_box-training.js_hover,
#top_menu .js_box-safedriving.js_hover{
background-color: rgba(255,240,30,0.5);
}

#top_menu h4{
margin-bottom: 15px;
font-size: 2.4rem;
}

#top_menu img{
height: 60px;
}
}