@charset "utf-8";

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

.fadein,.num_tt,.column_tt{
  opacity : 0;
  transform : translate(0, 20px);
  transition : all 800ms;
}

.column_txt_box_inner{
  opacity : 0;
  transform : translate(0, 20px);
  transition : all 400ms;
}

.fadein.scrollin,.num_tt.scrollin,.column_tt.scrollin{
  opacity : 1;
  transform : translate(0, 0);
}

.column_txt_box_inner.scrollin2{
  transform : translate(0, 0);
  opacity : 1;
}
.wrapper{
  
    min-width: 1030px;
}

.column_box_img_right{
    opacity : 0;
    transform : translate(80px, 0);
    transition : all 800ms;
}

.column_box_img_left{
    opacity : 0;
    transform : translate(-80px, 0);
    transition : all 800ms;
}

.column_box_img_right.scrollin,.column_box_img_left.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}


.column_box_img{
    opacity : 0;
    transform : translate(-80px, 0);
    transition : all 800ms;
}

#column02 .column_box_img{
    opacity : 0;
    transform : translate(80px, 0);
    transition : all 800ms;
}

.column_box_img.scrollin,#column02 .column_box_img.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}



/*------------------------------------------------
	header
--------------------------------------------------*/
#header .inner:after,
#sub_header .inner:after{
	content:".";display:block;height:0;clear: both;visibility:hidden;font-size:0;line-height:0;
}
#header {
    border-top: 6px solid #00b8f2;
    background: #FFF;
    min-width: 970px;
    border-bottom: solid 2px #ecebeb;
}
#header .inner {
	position: relative;
	margin: 0 auto;
	width: 970px;
	height: 38px;
    line-height: normal;
}
#header #sitelogo {
	position: absolute;
	left: 0px;
	top: 6px;
}
#header #site-btn {
	position: absolute;
	left: 110px;
    top: 2px;
	padding-left: 10px;
	border-left: 1px solid #DDD;
}
.indent {text-indent:-1em;padding-left:1em;}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

#menu{
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  height: auto;

}


/*------------------------------------------------
	pagegtop
--------------------------------------------------*/
#pagetop{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 24px;
    margin: 0 auto;
} 

#pagetop img{
  width: 100%;
}

/*------------------------------------------------
	footer
--------------------------------------------------*/
#footer {
	padding: 0 0 20px;
	background: #FFF;
	border-top: 3px solid #1eb9f0;
	min-width: 970px;
  position: relative;
  z-index: 1;
}
#footer .inner:after{
	content:".";display:block;height:0;clear: both;visibility:hidden;font-size:0;line-height:0;
}
#footer .inner {
	margin: 0 auto;
	padding-top: 13px;
	width: 970px;
}
#footer .copyright {
	float: right;
	width: 246px;
}
#footer .fnavi ul li {
    float: left;
    line-height: 1;
}


/*------------------------------------------------
	↑　さわらない　↑
--------------------------------------------------*/
#content{
  position: relative;
}
#main{
  width: 100%;
  max-width: 1920px;
  overflow: hidden;
  height: 100%;
  margin-bottom: 100px;
}

.main_scroll{
    position: absolute;
    bottom: 39%;
    right: 3%;
}

.main_img_flow{
  display: flex;

}

#main_img_01,#main_img_02,#main_img_03,#main_img_04,#main_img_05,#main_img_06,#main_img_07,#main_img_08{
  width: 26%;
  max-width: 480px;
}


.main_img_flow img{
    width: 100%;
    height: auto;
    max-width: 480px;
}

.main_img_box{
    width: 26%;
    max-width: 480px;
}

.main_tt_01{
  background: url("../images/main_bg_01_pc.jpg") no-repeat center;
  padding: 4% 0;
  position: relative;
}

#message{
  margin-bottom: 150px;
}

.message_tt_02{
  margin: 70px auto 90px;
}

#column_content{
    padding: 255px 0 196px;
    position: relative;
    max-width: 1366px;
    margin: 0 auto;
}

#bg_line{
    width: 100%;
    max-width: 1227px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
}

.column_scroll{
    position: absolute;
    top: 0;
    left: 0;
    right: -18px;
    width: 18px;
    margin: 0 auto;
}

.column_box{
  position: relative;
  margin-bottom: 225px;
}

/* #column03.column_box{
  margin-bottom: 0;
} */

.column_txt_box{
  text-align: left;
  position: relative;
  max-width: 1366px;
  width: 100%;
  margin: 0 auto 70px;
}

.num_tt{
  color: #009cd0;
  font-size: 40px;
  border-bottom: solid 4px #009cd0;
  display: inline-block;
  line-height: 1;
  font-style: italic;
  z-index: 1;
  position: relative;
  margin-bottom: 40px;
}

.column_tt{
    color: #fff;
    font-size: 60px;
    z-index: 1;
    position: relative;
    line-height: 1;
}

.column_tt span{
  background-color: #009cd0;
  padding: 0 0 0 10px;
  line-height: 1.4;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 30px;
}

.column_tt span:last-child{
  margin-bottom: 0;
}

.column_box_img_right{
  position: absolute;
  top: 0;
  right: 0;
}

.column_box_img_left{
  position: absolute;
  top: 0;
  left: 0;
}

.column_txt_box_inner{
    background-color: #fff;
    padding: 30px;
    z-index: 1;
    position: relative;
    display: inline-flex;
    color: #009cd0;
    text-align: left;
    flex-direction: column;

}

.column_txt_box_inner p{
    letter-spacing: 0.1em;
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.column_txt_box_inner p:last-child{
  margin-bottom: 0;
}

.column_txt_box_inner .our_btn{
  margin: 30px auto 0;
  -moz-transition: 0.3s;
  transition: 0.3s;
  text-align: center;
}

.column_txt_box_inner .our_btn:hover{
  cursor: pointer;
  opacity: 0.8;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

#column01 .column_txt_box{
  padding-left: 145px;
  padding-bottom: 100px;
  box-sizing: border-box;
}


#column02 .column_txt_box{
    padding-right: 130px;
    padding-bottom: 100px;
    text-align: right;
    box-sizing: border-box;

}

.column_box_img{
  width: 100%;
  max-width: 1000px;
  height: 620px;
  position: absolute;
  top: 240px;
  left: 0;
  background-color: #f0f0f0;
  z-index: -1;
}

#column02 .column_box_img{
  top: 120px;
  right: 0;
  left: auto;
}



.column_img_single{
  display: table;
  max-width: 460px;
  margin: 0 auto;
}

.column_img_single div > img,.column_img_double div > img{
  width: 100%;
  height: auto;
}

.column_img_double{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.column_img_double_box{
  max-width: 460px;

}

.column_img_double_box:first-child{
  margin-right: 60px;
}

.column_img_single p,.column_img_double p{
  text-align: left;
  text-align: justify;
  letter-spacing: 0.05em;
}

.column_img_single_tt,.column_img_double_tt{
  color: #fff;
  background-color: #009cd0;
  display: table;
  padding: 2px 10px 0;
  font-size: 24px;
  line-height: 1.5;
  margin: 10px 0;
  transition: 0.3s;

}

.more_btn{
  background: url("../images/more_btn_01_pc.png") no-repeat top center;
  width: 332px;
  margin: 20px auto 0;
  transition: 0.3s;
  background-size: 100% auto;
}

.more_btn:hover{
  background: url("../images/more_btn_02_pc.png") no-repeat top center;
  background-size: 100% auto;
  transition: 0.3s;

}


.more_btn a{
  display: block;
  height: 62px;
  margin: auto 0
}


#wrapper{
    margin: 0 auto;
    min-width: 1200px;
    width: 100%;
    overflow: hidden;
}

/*a img:hover{
	opacity: 0.7;
}
*/

#main{
    width: 100%;
    min-width: 320px;
    position: relative;
    margin: 0 auto 100px;
}

.sp_only{
	display: none;
}

.pc_only{
	display: block;
}

.bold{
	font-weight: bold;
}







.column_tt {
    min-height: 86px;
    margin: 0;
    overflow: hidden;
    /* display: inline-block; */
}

.column_tt p{
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    margin-bottom: 30px;
}

.column_tt　span {
  width: inherit;
  height: inherit;
  opacity: 0 !important;
}

#column02 .column_tt{
  text-align: right;
}



@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

/*//マスク要素をスライドアウトする*/
@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}


.isPlay {
  animation-name: play;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .4s;
  animation-delay: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #009cd0;
}




/*

mordal

*/


.mordal_box{
    width: 68%;
    max-width: 1280px;
    min-width: 1200px;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 0;
    right: 0;

}

.mordal_box >div:first-child{
    min-width: 900px;
}

.mordal_box ul{
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 260px;
  justify-content: space-between;
}

.mordal_box p{
  color: #009cd0;
  line-height: 4em;
  text-align: left;
  display: inline-block;
  
}

.mordal_box li{
  cursor: pointer;
}

.mordal_box li img{
  width: 120px;
  height: auto;
}

.mordal_inner_left{
  padding-top: 145px;
  box-sizing: border-box;
  position: relative;
  width: 320px;
  background-color: #fff;
}

#mordal_bg{
  background-color: #000;
  opacity: 0.8;
  height: 100vh;
    width: 100%;
  position: fixed;
  top:0;
  left: 0;
}

#mordal_bg,.mordal_box.mordal_box{
  display: none;
  z-index: 1;
}

.mordal_box.mordal_open{
  display: flex!important;
}

.close_btn{
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}

.smn_on{
  transition: 0.3s;
}

.smn_on:hover{
  opacity: 0.5;
  transition: 0.3s;
}


br.pc_only{
  display: inline;
}

	.st0{fill:#009CD0;stroke:#009CD0;stroke-width:0.9754;stroke-miterlimit:10;}
	.st1{fill:#009CD0;stroke:#009CD0;stroke-miterlimit:10;}

@media screen and (max-width:768px) {

body {
	font-size: 14px;
}

#header,#footer{
	min-width: 100%;
}

#header .inner,#footer .inner{
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
}

#header #sitelogo {
    left: 10px;
}

#header #site-btn {
	top: 10px;
    left: 123px;
}

img{
	max-width: 100%;
	height: auto;
}




#wrapper{
	min-width: 100%;
}



#footer .copyright {
    width: 100%;
    text-align: right;
}



#main {
  height: 100%;
  margin-bottom: 17.3%;
}
  
.main_scroll {
    position: absolute;
    bottom: 0;
    right: -4%;
    left: 0;
    margin: 0 auto;
    width: 4.534%;
}

.main_img_flow {
  display: flex;
  flex-wrap: wrap;
}

#main_img_01, #main_img_02, #main_img_03, #main_img_04, #main_img_05, #main_img_06, #main_img_07, #main_img_08 {
    width: 50%;
    max-width: 100%;
}
  
  #main_img_01,#main_img_08{
    order: 2;
  }
  #main_img_02,#main_img_05{
    order: 2;
  }
   #main_img_02,#main_img_07{
    order: 1;
  }
  #main_img_04,#main_img_06{
    order: 1;
  }
.column_scroll {
    position: absolute;
    left: 0;
    right: auto;
    width: 3.728%;
    margin: 0 auto;
}

.main_tt_01 {
  padding: 6% 5.4666%;
  box-sizing: border-box;
  line-height: 1;
}

#message {
  width: 89.3%;
  margin: 0 auto 28%;
}
  
.message_tt_02 {
    margin: 12% auto;
}
  
#column_content {
    padding: 28% 0 48%;
    position: relative;
    overflow: initial;
}

#column01 .column_txt_box {
  padding-left: 0;
  padding-bottom: 0;
}

.column_box_img_right {
  position: relative;

}

.column_tt {
    font-size: 30px;
    min-height: auto;
    margin-bottom: -1%;
}
  
  .column_tt p{
    margin-bottom: 0;
  }
  
#column02 .column_tt {
    text-align: left;
}

.column_txt_box_inner{
  margin-top: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 5% 8%;
  box-sizing: border-box;
}

.column_txt_box_inner p {
    letter-spacing: 0.05em;
    background-color: #fff;
    padding: 6% 6% 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}
  
.column_txt_box_inner p:last-child {
  padding-bottom: 6%;
}
  
.column_box_img{
  display: none;
}

.column_txt_box{
  margin-bottom: 12%;
}
  
.column_img_single {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto;
    width: 80.78%;
}
  
.num_tt {
    font-size: 20px;
    border-bottom: solid 2px #009cd0;
    margin-bottom: 5%;
}
  
.num_tt,.column_tt{
  margin-left: 7.5%;
}
  
.column_tt span {
    margin-bottom: 6%;
}
  
.column_img_single_tt, .column_img_double_tt {
  padding: 2% 3% 1%;
  font-size: 18px;
  margin: 5% 0 2%;
}

.more_btn {
    margin-top: 4%;
    width: 100%;
    max-width: 332px;
}

.column_box {
  margin-bottom: 28%;
}

#column02 .column_txt_box {
  padding-right: 0;
  padding-bottom: 0;
  text-align: left;
}

.column_box_img_left {
  position: relative;
  top: 0;
  left: 0;
}

.column_img_double_box:first-child {
  margin-right: 0;
  margin-bottom: 12%;
}

.column_img_double_box {
  max-width: 100%;
}

.column_img_double {
  flex-wrap: wrap;
  width: 80.78%;
}





.slides {
    max-width: 100%;
    width: 100%;
}


#bg_line{
  border-left: solid 1px #009cd0;
  width: 93%;
  height: 100%;
}
#bg_line svg{
  display: none;
}

#pagetop {
  width: 100%;
  display: inline-block;
  max-width: 24px;
}

#pagetop img {
  width: auto;
}
.fnavi ul{
  overflow: hidden;
  margin: 10px 0;
}
  
.column_txt_box_inner .our_btn{
    width: 100%;
    margin: 7% auto 0;
    max-width: 340px;
}
  
  
/*

  mordal
  
*/
.mordal_box{
  width: 84%;
  min-width: auto;
  flex-direction: column;
}
  
.mordal_inner_left{
  padding: 3% 6% 0;
  height: 210px;
  width: 100%;
}
.mordal_box ul {
    width: 30%;
    min-width: 190px;
    bottom: 5%;
    max-width: 380px;
    right: auto;
    left: 6%;
}

.mordal_box li img {
  width: 100%;
}

.mordal_box li {
  cursor: pointer;
  width: 46%;
}

.mordal_box p {
  display: block;
  line-height: 2em;
  font-size: 12px;
}

.close_btn {
  top: auto;
  right: 3%;
  width: 8.525%;
  bottom: 6%;
  max-width: 40px;
}
  

.mordal_box >div:first-child {
    min-width: 100%;
  overflow: hidden;
}
  
.sp_only{
	display: block;
}

.pc_only,br.pc_only {
	display: none;
}

  
}