@charset "utf-8";

section:not(#sec01){
 padding: 50px 0;
}

@media print, screen and (min-width:768px){
 section:not(#sec01){
 padding: 80px 0;
}
}

/*fv*/
#mainimage{
 position: relative;
 width: 100%;
}

#mainimage .mainimg_box{
 display: grid;
 grid-template-areas: 
  "a a a a a a"
  "a a a a a a"
  "a a a a a a"
  "b b b b b b"
  "b b b b b b"
  "b b b b b b";
 
}


#mainimage .mainimg_box .mainimg01{
 grid-area: a;
 background: url("../img/index_img/bg_mainimage01.jpg") center center no-repeat;
 background-size: cover;
}
#mainimage .mainimg_box .mainimg02{
 grid-area: b;
 background: url("../img/index_img/bg_mainimage02.jpg") center left no-repeat;
 background-size: cover;
}
#mainimage .mainimg_box figure{
 position: relative;
 padding: 130px 0;
}

#mainimage .mainimg_box figure::before{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.5);
}

#mainimage .mainimg_box figure img{
 width: 100%;
 height: auto;
}

#mainimage #maincatch{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
#mainimage #maincatch .japan_taiwan{
 margin-bottom: 30px;
}
#mainimage #maincatch .japan_taiwan p{
 font-size: 24px;
 font-weight: bold;
}

#mainimage #maincatch .japan_taiwan .arrow_box{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: row;
}
#mainimage #maincatch .japan_taiwan .arrow_box .arrow{
 position: relative;
 width: 3px;
 height: 50px;
 background: rgba(0,61,166,0.3);
 overflow: hidden;
}

#mainimage #maincatch .japan_taiwan .arrow_box .arrow:not(:last-of-type){
 margin-right: 20px;
}

#mainimage #maincatch .japan_taiwan .arrow_box .arrow::before{
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 margin: auto;
 width: 3px; 
 height: 8px;
 background: #003da6;
 box-shadow: 0 0 2px rgba(0,61,166,0.6);
}

#mainimage #maincatch .japan_taiwan .arrow_box .arrow_to_bottom::before{
 top: 0;
 animation: 1.5s infinite ease-out arrowTobottom;
}
#mainimage #maincatch .japan_taiwan .arrow_box .arrow_to_top::before{
 bottom: 0;
 animation: 1.5s infinite ease-out arrowTotop;
}

#mainimage #maincatch .japan_taiwan .arrow_box.sp_none{
 display: none;
}

#mainimage #maincatch h2{
 font-size: 28px;
 font-weight: bold;
 margin-bottom: 30px;
}

#mainimage .btn_mainimg a{
 text-decoration: none;
 display: block;
 width: 90%;
 font-size: 18px;
 font-weight: bold;
 color: #fff;
 background: #f90;
 padding: 10px 20px;
}

@keyframes arrowTobottom{
 0%{
  top: -9px;
 }
 100%{
  top: 60px;
 }
}

@keyframes arrowTotop{
 0%{
  bottom: -9px;
 }
 100%{
  bottom: 60px;
 }
}



@media print, screen and (min-width:768px){
 #mainimage .mainimg_box{
 grid-template-areas: 
  "a a a b b b"
  "a a a b b b"
  "a a a b b b"
  "a a a b b b"
  "a a a b b b"
  "a a a b b b";
}
 
 #mainimage .mainimg_box figure{
 position: relative;
 padding:300px 0;
}
 #mainimage #maincatch .japan_taiwan{
  display: flex;
  justify-content: center;
  align-items: center;
 }
 
 #mainimage #maincatch .japan_taiwan p{
 font-size: 36px;
}
 #mainimage #maincatch .japan_taiwan .arrow_box{
  margin: 0 30px;
 }
 
 #mainimage #maincatch .japan_taiwan .arrow_box.sp_none{
  display: flex;
  flex-direction: column;
}
 #mainimage #maincatch .japan_taiwan .arrow_box.pc_none{
 display: none;
}
 #mainimage #maincatch .japan_taiwan .arrow_box .arrow{
 position: relative;
 width: 80px;
 height: 3px;
}

#mainimage #maincatch .japan_taiwan .arrow_box .arrow:not(:last-of-type){
 margin-right: 0;
 margin-bottom: 20px;
}

#mainimage #maincatch .japan_taiwan .arrow_box .arrow::before{
 left: auto;
 right: auto;
 top: 0;
 bottom: 0;
 margin: auto;
 width: 8px; 
 height: 3px;
 background: #003da6;
 box-shadow: 0 0 2px rgba(0,61,166,0.6);
}
 
 #mainimage #maincatch .japan_taiwan .arrow_box .arrow_to_right::before{
  left: 0;
  animation: 1.5s infinite ease-out arrowToright;
 }
 #mainimage #maincatch .japan_taiwan .arrow_box .arrow_to_left::before{
  right: 0;
  animation: 1.5s infinite ease-out arrowToleft;
 }
 #mainimage #maincatch h2{
 font-size: 54px;
}
 #mainimage .btn_mainimg a{
 min-width: 360px;
  padding: 20px 30px;
}
}

@keyframes arrowToright{
 0%{
  left: -9px;
 }
 100%{
  left: 82px;
 }
}

@keyframes arrowToleft{
 0%{
  right: -9px;
 }
 100%{
  right: 82px;
 }
}


/*sec01*/
#sec01 .tx_box{
 position: relative;
 z-index: 1;
 background: linear-gradient(to bottom right, #003da6 0%, #00727B 100%);
 padding: 5% 8%;
 margin: 0 3% 0 0;
}
#sec01 .tx_box h3{
 text-align: left;
 font-size: 26px;
 font-weight: bold;
 color: #FFF;
 margin-bottom: 30px;
}

#sec01 .tx_box p{
 text-align: left;
 font-size: 18px;
 color: #fff;
}

#sec01 .tx_box p:not(:last-of-type){
 margin-bottom: 20px;
}

#sec01 .bg_img{
 background: url("../img/index_img/ph_greeting.png") center center no-repeat;
 background-size: cover; 
 padding: 180px 0;
 margin: -3% 0 0 3%;
}

@media print, screen and (min-width:768px){
 #sec01 .flex_box{
  display: flex;
  justify-content: center;
  margin: 3% 0 0;
 }
 #sec01 .flex_box .tx_box{
  width: 53%;
  margin:-3% -3% 4% 0;
  padding: 8% 5% 8% 12%;
 }
 #sec01 .tx_box h3{
 font-size: 36px;
}
 #sec01 .flex_box .bg_img{
  width: 50%;
  margin: 0;
  padding: 0;
 }
}

/*sec02*/
#sec02 .container > ul > li{
 
}

#sec02 .container > ul > li:not(:last-child){
 margin-bottom: 50px;
}

#sec02 .container > ul > li figure{
 margin-bottom: 20px;
}

#sec02 .container > ul > li figure img{
 width: 100%;
 height: auto;
}

#sec02 .container > ul > li .tx_box h4{
 font-size: 22px;
 font-weight: bold;
 margin-bottom: 30px;
}

#sec02 .container > ul > li .tx_box p{
 text-align: left;
 font-size: 18px;
 margin-bottom: 20px;
}
#sec02 .container > ul > li .tx_box p.link_tx{
 margin: 0;
}
#sec02 .container > ul > li .tx_box ul{
 margin-bottom: 20px;
}
#sec02 .container > ul > li .tx_box ul li{
 text-align: left;
}
#sec02 .container > ul > li .tx_box ul li::before{
 content: "・";
}

@media print, screen and (min-width:768px){
 #sec02 .container > ul > li{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
 }
 #sec02 .container > ul > li:nth-child(2n){
  flex-direction: row-reverse;
 }
 #sec02 .container > ul > li .tx_box h4{
  text-align: left;
 font-size: 24px;
}

#sec02 .container > ul > li .tx_box p{
 font-size: 20px;
}
}

/*sec03*/
#sec03{
 background: linear-gradient(to bottom right, #003da6 0%, #00727B 100%);
}
#sec03 .title01{
 color: #fff;
}
#sec03 ul li:not(:last-child){
 margin-bottom: 50px;
}

#sec03 ul li figure{
 margin-bottom: 20px;
}

#sec03 ul li figure img{
 width: 100%;
 height: auto;
}

#sec03 ul li h4{
 font-size: 20px;
 font-weight: bold;
 color: #fff;
 margin-bottom: 30px;
}

#sec03 ul li p{
 text-align: left;
 color: #fff;
}

@media print, screen and (min-width:768px){
 #sec03 ul{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
 }
 #sec03 ul li{
  width: 30%;
 }
 #sec03 ul li:not(:last-child){
 margin-bottom: 0;
}

}

/*sec04*/
#sec04 .faq_box li:not(:last-child){
 margin-bottom: 30px;
}

#sec04 .faq_box li .question{
 text-align: left;
 font-size: 20px;
 font-weight: bold;
 color: #fff;
 background: #003da6;
 padding: 10px 20px;
 transition: 0.5s all;
}
#sec04 .faq_box li .question:hover{
 cursor: pointer;
 opacity: 0.7;
}

#sec04 .faq_box li .answer{
 display: none;
 text-align: left;
 background: #F5F5F5;
 padding: 20px;
}