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

/*---------------------------------------------
	reset
  ---------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
}

li{list-style:none;}

a:active,
a:hover {
	outline: 0;
}
@-ms-viewport { width: auto; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		 -o-box-sizing: border-box;
		-ms-box-sizing: border-box;
			box-sizing: border-box;
}
img {
    max-width: 100%;
	vertical-align: bottom;
	height: auto; 
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
table th , table td{
	word-break:break-all;
}
input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}


/* -----------------------------------
    common
   ----------------------------------- */

html{
	font-size:62.5%; /*1rem=10px*/
}

body, td, th, h1, h2, h3, h4, h5, h6 {
font-family: 'Shippori Mincho',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝",メイリオ,Meiryo,serif;
}
body {
      -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
	font-size:1.6rem;
	color: #251714;
	line-height: 1;
	font-feature-settings:"palt";
    position: relative;	
    text-align: justify;
  word-break:break-all; 
  text-justify:inter-ideograph;
  text-justify:inter-character;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.en{
font-family: 'Shippori Mincho', serif;
text-align:inherit;
  word-break: break-word;
text-justify: none;
  word-wrap:break-word;
  overflow-wrap: break-word;
}

.en td,.en th,
.en h1,.en h2,
.en h3,.en h4,
.en h5,.en h6 {
font-family: 'Shippori Mincho', serif;
}

a { text-decoration: none; transition: all 0s}
a:link {color: inherit;}
a:visited {color: inherit;}
a:hover {color: inherit; transition: all 0.3s linear;text-decoration: none }
a:active { color: #000000; }

.text-small {font-size: 0.85em; display: inline-block; }
.text-large{font-size: 20px !important}
.text-bold{font-weight: bold !important;}
.text-right {text-align: right !important;}
.text-left {text-align: left !important;}
.text-center {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}
.text-center_pc {text-align: center !important;}
@media only screen and (max-width:640px){
.text-center_pc {text-align: left !important;}
}

.txt-spacing-005{letter-spacing: 0.05em;}
.txt-spacing-01{letter-spacing: 0.1em;}
.txt-spacing-015{letter-spacing: 0.15em;}
.txt-spacing-02{letter-spacing: 0.2em;}

span.text-sup,
span.text-sub{
	font-size: 75.5%;
	vertical-align: top;
	position: relative;
	top: -0.03em;
	padding-left: 1px;
	padding-right: 1px;
}
span.text-sub {
	vertical-align: bottom;
	top: 0.03em;
}
.mt-0 { margin-top: 0px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-100 { margin-top: 100px !important; }
.mb-0 { margin-bottom: 5px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 20px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mb-100 { margin-bottom: 100px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }
.ml-mr-5 { margin-left: 5px !important; margin-right: 5px !important; }
.ml-mr-10 { margin-left: 10px !important; margin-right: 10px !important; }
.ml-mr-20 { margin-left: 20px !important; margin-right: 20px !important; }
.ml-mr-50 { margin-left: 50px !important; margin-right: 50px !important; }
.margin-15{margin: 15px !important}
.pt-0 { padding-top: 0px !important; }
.pl-10 { padding-left: 10px !important; }
.pr-10 { padding-right: 10px !important; }
.plr-10 { padding-left: 10px !important;padding-right: 10px !important; }

.width1em { width: 1em !important; }
.width2em { width: 2em !important; }
.width3em { width: 3em !important; }
.width4em { width: 4em !important; }
.width5em { width: 5em !important; }
.width6em { width: 6em !important; }
.width7em { width: 7em !important; }
.width8em { width: 8em !important; }
.width9em { width: 9em !important; }
.width10em { width: 10em !important; }
.width11em { width: 11em !important; }
.width12em { width: 12em !important; }
.width13em { width: 13em !important; }
.width14em { width: 14em !important; }
.width15em { width: 15em !important; }
.width20em { width: 20em !important; }
.width25em { width: 25em !important; }
.width30em { width: 30em !important; }
.width40em { width: 40em !important; }
.width50em { width: 50em !important; }
.width15per { width: 15% !important; }
.width16per { width: 16% !important; }
.width35per { width: 35% !important; }
.width50per { width: 50% !important; }
.width55per { width: 55% !important; }
.width60per { width: 60% !important; }
.width70per { width: 70% !important; }
.width80per { width: 80% !important; }
.width90per { width: 90% !important; }
.width100per { width: 99% !important; }
.width-auto { width: auto !important; }

.flex,
.flex-start,
.flex-end{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;}
.flex-start{justify-content: flex-start;}
.flex-end{justify-content: flex-end;}

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}

.pc, .pc-block{display:block !important;}
.pc-inline  {display:inline !important;}  
.sp , .sp-block{display:none !important;}

@media only screen and (max-width:640px){
.pc, .pc-block, .pc-inline{display:none !important;}
.sp{display:inline !important;}
.sp-block{display:block !important;}
}


/*---------------------------------------------
	container
  ---------------------------------------------*/

.inner{
margin: 0 auto;
}

.title{
margin: 0 auto;
}

h2.title{
    margin-bottom: 75px;
}

h2.title::before{
content: '';
width: 65px;
height: 65px;
background-color: #fff000;
border-radius: 50%;
display: block;
margin: 0 auto 65px;
}

a.icon-link{
    font-size: 1.4rem;
    line-height: 1.4
}
a.icon-link::after{
    content: '';
    width: 9px;
    height: 12px;
    display: inline-block;
    background-image: url("../img/icon-arrow.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}
.line-height_s{line-height: 1.6 !important}

@media only screen and (max-width:640px){
h2.title {
  margin-bottom: 55px;
}
h2.title::before{
width: 31px;
height: 31px;
margin: 0 auto 30px;
}
}

/*---------------------------------------------
	header
  ---------------------------------------------*/

#gnav .fixed{
position: fixed;
z-index: 3;
left: 0;
top: 0;
width: 100%;
padding: 45px 0 0;
}

#gnav .fixed .inner{
width: calc(100% - 100px);
display: flex;
justify-content: space-between;
margin: 0;
}

#gnav .fixed .inner .aside{
margin-left: auto;
display: flex;
justify-content: space-between;
}

#gnav .language{
display: flex;
flex-direction: row;
align-items: flex-start;
color: #fff;
font-size: 1.6rem;
letter-spacing: 0.1em;
margin-right: 35px;
}

#gnav .language a:link,
#gnav .language a:visited{color: #fff;}
#gnav .language .langja{margin-right: 5px;}
#gnav .language .langen{margin-left: 5px;}

#gnav .drawer__btn {
width: 35px;
height: 20px;
cursor: pointer;
position: relative;
}
#gnav .drawer__btn span {
display: block;
width: 100%;
height: 2px;
background-color: #fff;
transition: 0.3s;
position: absolute;
top: 12px;
left: 50%;
}
#gnav .drawer__btn span:nth-child(1) {transform: translate(-50%, -9px);}
#gnav .drawer__btn span:nth-child(2) {transform: translate(-50%, 2px);}
#gnav .drawer__btn.active{z-index: 3;}
#gnav .drawer__btn.active span:nth-child(1) {
    transform: translate(-50%, 0) rotate(45deg);
    background-color: #251714 !important;
}
#gnav .drawer__btn.active span:nth-child(2) {
    transform: translate(-50%, 0) rotate(-45deg);
    background-color: #251714 !important;
}
#gnav .drawer__menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 300px;
  height: 100vh;
  overflow-y: auto;
  transition: 0.3s;
  transform: translateX(100%);
  opacity: 0;
  background-color: #fff;
}
#gnav .drawer__menu .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
}
#gnav .drawer__menu a,
.drop-menu span{
    font-size: 2.5rem;
    letter-spacing: 0.1em;
}
#gnav .drawer__menu ul li{margin-top: 35px;}
#gnav .drawer__menu .language{
    margin-top: 35px;
    color: #251714;
}
#gnav .drawer__menu .language a{font-size: 2rem;}
#gnav .drawer__menu a:link,#gnav .drawer__menu a:visited{color: #251714;}
#gnav .fixed.active .language{display: none;}
#gnav .drawer__menu.active {
  transform: translateX(0);
  opacity: 1;
}
#gnav .drawer__bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background-color: rgba(255,255,255,0.7);
  transition: 0.3s;
  transform: translateX(100%);
  opacity: 0;
  cursor: pointer;
}
#gnav .drawer__bg.active {
  transform: translateX(0);
  opacity: 1;
}
#header.headerColorScroll .drawer__btn span{
  background-color: #251714;
  transition: color 0.4s ease-out;
}
#header.headerColorScroll .fixed .aside .language{display: none;}



.drop-menu{
    width: 100%;
    position: relative;
}
.drop-menu-list {
    padding-left: 1.5rem;
    transform: scaleY(0);
    transform-origin: center top;
    transition: all .3s;
    width: 100%;
    height: 0%;
    opacity: 0;
    position: absolute;
    top: 0;
}
.drop-menu:hover{height: 100%}
.drop-menu:hover .drop-menu-list {
    transform: scaleY(1);
    height: 100%;
    opacity: 1;
    position: static
}



@media only screen and (max-width:640px){
#gnav .fixed{padding: 35px 0 0;}
#gnav .fixed .inner{width: calc(100% - 35px);    }
#gnav .drawer__btn {width: 25px;}
#gnav .drawer__menu {width: 70vw;   }
#gnav .drawer__menu a,
.drop-menu span{font-size: 2rem;}
#gnav .language{
    max-width: inherit;
    font-size: 1.5rem;
    margin-right: 15px;
}   
#gnav .drawer__menu .language a{font-size: 1.3rem;}
#gnav .drawer__btn span:nth-child(1) {transform: translate(-50%, -6px);}
}

/*---------------------------------------------
	mainvisual
  ---------------------------------------------*/

#mainvisual{
position: relative;
}

h1{
    position: absolute;
top: 45px;
left: 100px;
    z-index: 1;
}

h1 a{
display: block;
}

h1 img{
max-width: 120px;
}

h1.logo img{
max-width:100px;
}

.mv-text{
position: absolute;
bottom: 55px;
left: 100px;
z-index: 1;
color: #fff;
font-size: 1.6rem;
line-height: 2.4;
width: max-content;
}
 .swiper01 .slide-media,
.swiper01  .thumb-media {
    position: relative;
    overflow: hidden;
  }
 .swiper01 .slide-media img,
 .swiper01 .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .swiper01 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper01 .slide-media {
        height: 93vh;
  }
.swiper01.vh .slide-media {
height: 100vh;
  }
.swiper01.full .slide-media {
height:auto;
  }
.swiper01 .slide-media img{
position: inherit;
}

@media only screen and (max-width:640px){
h1{
    top: 35px;
    left: 35px;
}
h1 img{
width: 23%;
max-width: 308px;
}
h1.logo img{
width: auto;
max-width: 70px;
}
.mv-text{
bottom: 50px;
left: 35px;
font-size: 1.2rem;
}

.swiper01 .slide-media {
height: 100dvh;
height: 100vh;
} 

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
bottom: 25px !important;
    }
}
@media only screen and (max-width:320px){
.mv-text{
font-size: 1rem;
}
}

/*---------------------------------------------
	footer
  ---------------------------------------------*/

footer{
text-align: center;
margin-top: 90px;
margin-bottom: 85px;
}

footer a.privacy{
font-size: 1.4rem;
display: block;
margin-top: 35px;
}
footer a:link,
footer a:hover,
footer a:visited{
color: #251714;
}

footer a.privacy::after{
content: '';
    width: 9px;
    height: 12px;
    display:  inline-block;
background-image: url("../img/icon-arrow.jpg");
background-size: contain;
background-repeat: no-repeat;
margin-left: 0.5em;
}

footer .address{
margin-top: 85px;
font-size: 1.3rem;
}

footer .address p + p{
margin-top: 10px;
}

@media only screen and (max-width:640px){
footer{
margin-top: 80px;
margin-bottom: 80px;
}
footer a.privacy {
  font-size: 1.2rem;
  margin-top: 15px;
}
footer a.privacy::after{
    width: 7px;
    height: 8px;
}
footer .address {
  margin-top: 45px;
  font-size: 1.2rem;
    }
}


/*---------------------------------------------
	en
  ---------------------------------------------*/

.en .mv-text{
letter-spacing: 0;
}

/* -----------------------------------
   animation
 * ----------------------------------- */
/*fade*/

.blur{
	animation-name:blurAnime;
	animation-duration:1.35s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	opacity: 0;
  }

  to {
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}


.delaytime05{
animation-delay: 0.5s;
}
.delaytime1{
animation-delay: 1s;
}
.delaytime15{
animation-delay: 1.5s;
}
.delaytime2{
animation-delay: 2s;
}
.delaytime25{
animation-delay: 2.5s;
}
.delaytime3{
animation-delay: 3s;
}



a.txt-link::after {
    content: '';
    width: 9px;
    height: 12px;
    display: inline-block;
    background-image: url(../img/icon-arrow.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 0.5em;
}

video{
    width: 100%
}


.videoWrapper iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border: none;
}

.videoWrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/movie-thumbnail.webp");
  background-size: cover;
}

.videoWrapper.pv::after {
  display: none;
}

#play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 150px;
  height: 150px;
  display: inline-block;
  background: url("../img/movie-iconplay.png") no-repeat;
  cursor: pointer;
  background-size: contain;
}

@media only screen and (max-width:640px){
#play {
width: 88px;
height: 88px;
background-size: contain;
}
}

/* -----------------------------------
   カラム
 * ----------------------------------- */
.block-95per {width: 95% !important}
.block-80per {width: 80% !important}
.block-70per {width: 70% !important}
.block-60per {width: 60% !important}
.block-55per {width: 55% !important}
.block-50per {width: 50% !important}
.block-40per {width: 40% !important}
.block-30per {width: 60% !important}
@media only screen and (max-width:640px){
.block-95per,
.block-80per,
.block-70per,
.block-60per,
.block-55per,
.block-50per,
.block-40per,
.block-30per {width: 100% !important}    
}

/*---------------------------------------------
	取り組み
  ---------------------------------------------*/
.btn-bg_photo{
    max-width: 1000px;
    margin: auto;
}
.btn-bg_photo ul{gap:40px 20px}
.btn-bg_photo ul li{
    width: calc(100% / 2 - 20px);
    height: 320px;
}
.btn-bg_photo ul li{
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    position: relative;
    transition: all 0.3s linear;
    background-position: center center;
}
.btn-bg_photo ul li a{
    display: flex;
    color: #FFFFFF;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    line-height: 1.5;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    transition: all 0.3s linear;
}
.btn-bg_photo ul li::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
}
.btn-bg_photo ul li:hover,
.btn-bg_photo ul li a:hover{transition: all 0.3s linear;}
.btn-bg_photo ul li:hover::before{
    background: rgba(255,223,0,0.7);
    transition: all 0.3s linear;
}
.btn-bg_photo ul li span.txt-main{
    display: block;
    font-size: 20px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 1), -1px -1px 10px rgba(0, 0, 0, 1), 1px 1px 10px rgba(0, 0, 0, 1);
}
.btn-bg_photo ul li span.txt-hove{display: none}
.btn-bg_photo ul li:hover span.txt-main{display: none}
.btn-bg_photo ul li:hover span.txt-hove{
    display: block;
    border-bottom: 1px solid #FFFFFF;
    font-size: 22px;
}
.btn-bg_photo ul li span small{
    font-size: 80%;
    display: block;
    margin-top: 10px
}

/* type-B*/
.btn-bg_photo ul#indexB li span.txt-main{font-size: 22px;}
.btn-bg_photo ul li span small{font-size: 70%;}
@media only screen and (max-width:800px) {
.btn-bg_photo ul#indexB li span.txt-main{font-size: 20px;}     
}

/*▼トップページ用*/
.btn-bg_photo#btn-bg_photo__index ul li:nth-child(1){background-image: url(../img/index/img-action_01.webp);}
.btn-bg_photo#btn-bg_photo__index ul li:nth-child(2){background-image: url(../img/index/img-action_02.webp);}
/*.btn-bg_photo#btn-bg_photo__index ul li:nth-child(1),
.btn-bg_photo#btn-bg_photo__index ul li:nth-child(1) a{pointer-events: none;}*/

/*▼下層ページ用*/
.btn-bg_photo#btn-bg_photo__lower ul li:nth-child(1){background-image: url(../img/action/img-action-torikumi-1.webp);}
.btn-bg_photo#btn-bg_photo__lower ul li:nth-child(2){background-image: url(../img/action/img-action-torikumi-2.webp);}
.btn-bg_photo#btn-bg_photo__lower ul li:nth-child(3){background-image: url(../img/action/img-action-torikumi-3.webp);}
.btn-bg_photo#btn-bg_photo__lower ul li:nth-child(4){background-image: url(../img/action/img-action-torikumi-4.webp);}

@media only screen and (max-width:1000px) {
.btn-bg_photo{width: 100%}        
}
@media only screen and (max-width:860px) {
.btn-bg_photo ul{gap:20px 10px}
.btn-bg_photo ul li{
    width: calc(100% / 2 - 10px);
    height: 250px;
}      
}
@media only screen and (max-width:800px) {
.btn-bg_photo ul li{width: 100%;}     
.btn-bg_photo ul li span.txt-main{font-size: 18px;}
.btn-bg_photo ul li:hover span.txt-hove{font-size: 20px;}    
}


/*---------------------------------------------
	pager
  ---------------------------------------------*/
.pager li a{
    display: block;
    text-align: center;
    padding: 10px 5px;
    line-height: 1.2;
    font-size: 15px;
}
.pager li:not(.active) a:after {
  content: '';
  width: 9px;
  height: 12px;
  display: inline-block;
  background-image: url("../img/icon-arrow.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.5em;
}
.pager li.active a:before{
    content: "●";
    color: #fff100;
    padding-right: 0.5em;
    
}
@media only screen and (max-width:640px){
.pager li a{font-size: 14px;}
.pager li:lang(en) a{word-break: break-word;}
}


.list{
    justify-content: center;
    gap: 10px 30px
}
.list li a{
    display: inline-block;
    text-align: center;
    padding: 5px 3px;
    line-height: 1.2;
    font-size: 15px;
}
.list li.active a,
.list li a:hover{border-bottom: 4px solid #fff100;}
@media only screen and (max-width:640px) {
.list li{
    display: block;
    width: 100%;
    text-align: center;
}    
}


/*---------------------------------------------
	タブ
  ---------------------------------------------*/
.tab{
    display: flex;
    justify-content: center;
    gap:20px
}
.tab li a{
    font-size: 15px;
    padding: 0.7em 0.85em;
    line-height: 1.4;
    color: #555555;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #cccccc;
    display: block
}
.tab li.active a{
    color: #000000;
    border-bottom: none;
}
.tab li a:before,
.tab li a:after{
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0;
    height: 4px;
    background-color: #fff100;;
    transition: all 0.4s ease-out;
}
.tab li a:before{right: 50%;}
.tab li a:after {left: 50%;}
.tab li.active a:before,
.tab li.active a:after,
.tab li a:hover:before,
.tab li a:hover:after{width: 50%;}
@media only screen and (max-width:640px){ 
.tab li a{
    font-size: 14px;
    padding: 1.5em .5em 0.7em;
}
}
@media only screen and (max-width:480px){
.tab {flex-wrap: wrap}    
.tab li{width: 50%}
.tab li a{width: 100%}
}