@charset "utf-8";
/* CSS Document */
/*  PC 1200px レスポンシブル設定は600px～ 1em = 16px */

* {margin:0;padding:0;}

body {color: #333333; font-size:1em; text-align: center; background: #ebebeb; 
font-family:"Gothic MB101 Regular", YuGothic, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;}
html {overflow-y:scroll;}
main {margin: 0 auto; width: 80%;}
section{margin: 1.0em 0;}

p,li,dt,dl {font-size:1.0em; line-height:1.4;}
li {list-style-type:none;}
img {border:0; width: 100%; height: auto;}
i{font-style: normal;}
h1,h2,h3{/*font-family: kozuka-gothic-pr6n, sans-serif; font-style: normal; font-weight: 200;*/ font-weight: bold;}

h1 {font-size:3.4em; font-weight: bold; color: #333; text-align: center;}
h2 {font-size:2.4em; font-weight: normal; color: #333; text-align: center;}
h3 {font-size:1.8em; font-weight: bold; color: #333; text-align: center;}
@media screen and (max-width: 750px) {
    h1 {font-size:2.6em; font-weight: normal; color: #333; text-align: center;}
    h2 {font-size:2.0em; font-weight: normal; color: #333; text-align: center;}
    h3 {font-size:1.2em; font-weight: bold; color: #333; text-align: center;}
}

.small {font-size: 0.7em;}


/* Link */
a{user-select: none; text-decoration:none; transition : all 0.5s;}
a:link {color:#666; text-decoration:none;}
a:visited {color:#116333; text-decoration:none;}
a:hover {color:#116333; text-decoration:none;}
a:active {color:#666;}

/* スクロール固定解除の位置を半角数値で設定する為のタグ */
#fix-clear-position{display: none;}
.h_fix{position:fixed; top:0;}

/* PAGE TOP */
#page-top {position: fixed; right: 10px; bottom: 10px; background: rgba(0,0,0,0.5);
border: 1px solid #fff; border-radius: 50%; border-right: 0; z-index: 9999; }
#page-top a{color: #FFF; font-size: 0; position: relative; display: block; width: 30px; height: 30px; padding: 10px;}
#page-top a:before{content: ""; display: block; 
    position: absolute; top: calc(50% - 24px); left: calc(50% - 12px);
width: 0; height: 0; border: 12px solid transparent; border-bottom: 20px solid rgba(255,255,255,0.9);}

#page-top{transition: all 0.5s ease-in-out; filter: drop-shadow(0 0px 3px rgba(0, 0, 0, .0));}
#page-top:hover{filter: drop-shadow(0 0px 5px rgba(0, 0, 0, .9));}
#page-top:hover a:before{border-bottom: 20px solid rgba(255,255,255,1.0);}


/* レスポンシブル改行タグ */
.pc{display:inline-block;}
.sp{display:none;}
@media screen and (max-width: 600px) {
    .pc{display:none;}
    .sp{display:inline-block;}
}


/*haeder*/
@media screen and (min-width: 750px) {
    #header{}
    header{margin: auto; max-width: 1200px; width: 100%; background: #FFF; padding-bottom: 10px;}
    header input{display: none;}
    header label{display: none;}
    header ul{display: flex; width: 100%; height: 90px;}
    header ul li{border: 1px solid #FFF; margin-top: 0px; margin-left: 10px; /*width: 130px;*/ width: 160px;}
    header ul li:not(:last-child) {display: flex; align-items: flex-end;}
    
    header ul li a{width: 100%; font-size: 1.1em;}
    header ul li:first-child{width: 250px; font-size: 0.8em; font-weight: bold; text-align: center; margin-left: 20px;
        margin-right: calc(100% - (180px + 330px + 30px + 160px + 40px)); 
        /*margin-right: calc(100% - (250px + 330px + 30px + 160px + 40px));*/}
    header ul li:first-child img{width: 100%; height: auto;}

    header ul li:last-child{width: 150px; background: #116333; border: 1px solid #116333; position: relative; top:0px; left: 0px; height: 88px; display: flex; justify-content: center; align-items: center;}
    header ul li:last-child a{color: #FFF; font-size: 1.0em; margin-top: 16px;}
    header ul li:last-child a img{width: 30px; height: auto;}
    
    header ul li {
      background:
        linear-gradient(#116333 0 0) bottom 0   left 50% /var(--a, 0) 1px no-repeat,
        linear-gradient(#116333 0 0) bottom 6px left 50% /var(--b, 0) 1px no-repeat;
      transition:0.5s;
        padding-bottom: 10px;
    }
    header ul li:not(:first-child):hover {
      --a: 60%;
      --b: 80%;
    }

}


header{position: fixed; top:0; z-index: 999;}
@media screen and (min-width: 1200px) {
    header{left: calc(50% - 600px);}
}


@media screen and (max-width: 750px) {
    #header{width: 100%;}
    header input{display: none;}
    header label{display: block; width: 50px; height: 50px; background: rgba(0,0,0,0.8); position: fixed; top:0; right: 0; z-index: 999;}
    header label span{display: block; margin: 10px; height: 10px; border-top: 3px solid #FFF;}
    header label span{position: relative; top:0px;}
    header label span:after{-webkit-transform: rotate(0deg); transform: rotate(0deg);
        content: ""; width: 100%; height: 3px; background: #FFF; display: block;
        position: absolute; top:calc(0% + 10px);}
    header label span:before{-webkit-transform: rotate(0deg); transform: rotate(0deg);
        content: ""; width: 100%; height: 3px; background: #FFF; display: block;
        position: absolute; top:calc(100% + 13px);}

    header label span:after,
    header label span:before{transition: all 0.3s ease 0s;}
    
    header label:hover{cursor: pointer;}
    
    header input:checked + label{z-index: 999; background: none;}
    header input:checked + label span{border: none; top:5px;}
    header input:checked + label span:after{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top:calc(50% - 1.5px);}
    header input:checked + label span:before{-webkit-transform: rotate(-135deg); transform: rotate(-135deg);
    content: ""; width: 100%; height: 3px; background: #FFF; display: block;
     position: absolute; top:calc(50% - 1.5px);}

    header ul {display: none;}
    header input:checked + label + ul{display: block;}
    header input:checked + label + ul{position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 99; 
        background: rgba(0,0,0,0.8); text-align: center;}
    
    header input:checked + label + ul li{width: 50%; border-bottom: 0px solid #ccc; margin: auto; padding: 30px 0 10px; color:#ccc;}
    header input:checked + label + ul li a{color:#ccc;}
    header input:checked + label + ul li:first-child{padding-top: 50px;}
    header input:checked + label + ul li:first-child img{width: 80%; height: auto; border: 10px solid #FFF; margin: auto auto 10px; display: block;}
    
    header input:checked + label + ul li:last-child a{text-align: center;}
    header input:checked + label + ul li:last-child a img{width: 30px; height: auto; margin: auto; display: block;}
    
    header ul li {
      background:
        linear-gradient(#ccc 0 0) bottom 0   left 50% /var(--a, 0) 1px no-repeat,
        linear-gradient(#ccc 0 0) bottom 6px left 50% /var(--b, 0) 1px no-repeat;
      transition:0.5s;
        padding-bottom: 10px;
    }
    header ul li:hover {
      --a: 60%;
      --b: 70%;
    }
}




/*footer*/
footer a:link {color:#fff; text-decoration:none;}
footer a:visited {color:#fff; text-decoration:none;}
footer a:hover {color:#116333; text-decoration:none;}
footer a:active {color:#fff;}

@media screen and (min-width: 750px) {
    #footer{}
    footer{margin: auto; max-width: 1200px; width: 100%; background: #333; color: #fff; padding: 0 0 20px 0;}
    
    footer div{display: flex; flex-wrap: wrap; padding: 0px 0px; background: #ddd; color: #333; justify-content: center;}
    footer div h2{width: 40%; font-size: 1.4em; background: #116333; color: #FFF; padding: 20px 0px; margin-right: 0.5px; font-weight: normal;}
    footer div h2 a{display: block; color: #FFF; font-size: 1.4em; font-weight:bold; line-height: 100%;}
    footer div h2 a:link,
    footer div h2 a:active{color: #FFF;}
    
    footer div h2 + p{width: 40%; background: #116333; padding: 20px 0px 10px 0; margin-left: 0.5px;}
    footer div h2 + p a{color: #FFF!important; display: flex; justify-content: center; align-items: center; font-size: 1.4em;}
    footer div h2 + p a:hover{text-decoration: none;}
    footer div h2 + p img{width: 40px; height: auto;}
    
    footer ul{width: 100%; display: flex; justify-content: center; align-items: center; margin: 30px auto;}
    footer ul li{margin: 0 20px; text-align: center; }
    footer ul + p{width: 100%; text-align: center; font-size: 0.8em;}
}

@media screen and (max-width: 750px) {
    #footer{}
    footer{margin: auto; width: 100%; background: #333; color: #fff; padding: 0 0 20px 0;}
    
    footer div{display: flex; flex-wrap: wrap; padding: 0px 0px; background: #ddd; color: #333; justify-content: center;}
    footer div h2{width: 45%; font-size: 1.2em; background: #116333; color: #FFF; padding: 24px 0px 0px; margin-right: 0.5px; line-height: 120%; font-weight: normal;}
    footer div h2 a{display: block; color: #FFF; margin-top: 10px; font-size: 1.2em; font-weight:bold; line-height: 100%;}
    footer div h2 a:link,
    footer div h2 a:active{color: #FFF;}
    
    footer div h2 + p{width: 45%; background: #116333; padding: 20px 0px 10px 0; margin-left: 0.5px;}
    footer div h2 + p a{color: #FFF!important; display: flex; justify-content: center; align-items: center; font-size: 1.2em; line-height: 120%;}
    footer div h2 + p a:hover{text-decoration: none;}
    
    footer div h2 + p img{width: 40px; height: auto;}
    
    
    footer ul{width: 100%; display: flex; justify-content: center; align-items: center; margin: 20px auto 10px;}
    footer ul{flex-wrap: wrap;}
    footer ul li{margin: 10px 10px; text-align: center; font-size: 0.9em;}
    footer ul + p{width: 100%; text-align: center; font-size: 0.8em;}
}

@media screen and (max-width: 600px) {
    footer div h2{width: 100%;}
    footer div h2 br.sp{display: none;}
    
    footer div h2 + p{width: 100%; margin-left: 0;}
    footer div h2 + p a br.sp{display: none;}
}


/* 問い合わせボタン */
.btn_contact{display: inline-block; background: #ffa800; color: #FFF!important; border-radius: 3px; padding: 2px 10px;}
.btn_contact:hover{background: #ff9000; text-decoration: none;}

article{margin: auto; max-width: 1200px; width: 100%; background: #FFF; border-bottom:1px solid #FFF; display: block;}

@media screen and (min-width: 750px) {
    article{margin-top: 90px;}
}
@media screen and (max-width: 750px) {
    article{margin-top: 0px;}
}

/* background: rgba(6, 109, 42, 0.9); */
#TOP article{position: relative;}
#TOP article .bk_img{position: relative; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
#TOP article .bk_img:before{content: ""; position: absolute; top:850px; left: 0px; width: 2000px; height: 2000px; border: 300px solid rgba(6, 109, 42, 0.2); 
    transform:rotate(45deg); z-index: -1;}

#TOP section{z-index: 2;}


/* TOP ---------------------------------------------------------------------*/
#top_section_01{padding: 0; margin: 0; width: 100%;}
#top_section_01 div{position: relative; margin-bottom: 70px;}

#top_section_01 div h1{position: absolute; top:40px; left: 0px; background: #FFF; text-align: left; padding: 10px 40px; line-height: 100%; font-weight: bold; filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .9)); z-index: 9;}
#top_section_01 div h1 small{display: block; font-size: 0.7em;}
#top_section_01 div h1 small i{display: inline-block; width: 100px; height: 1px;  background: #116333; margin-right: 20px; position: relative; top:-12px;}
/* 左寄せ調整 */
#top_section_01 div h1{position: absolute; top:40px; left: -40px;  padding: 10px 60px; text-align: center;}
#top_section_01 div h1 small{text-align: left; position: relative; left: -20px;}

#top_section_01 div ul{position: absolute; top:190px; left: 0px; display: flex; justify-content: flex-end; width: 790px;}
#top_section_01 div ul li{display: flex; justify-content: center; align-items: center; width: 45%; height: 40px;
border: 1px solid #FFF; background: rgba(255,255,255, .5); margin: 0 8px; position: relative;
font-weight: bold; font-size: 1.4em; color: #FFF; text-shadow: 2px 3px 2px rgba(0,0,0, .3);}

#top_section_01 div ul li:before{content: ""; display: block; position: absolute; left: -5px; top:-5px; width: 100%; height: 100%; border: 1px solid #FFF; padding: 4px;}

#top_section_01 h2{font-weight: bold;}
#top_section_01 h2 b{font-size: 1.4em; color: #116333; margin: auto 4px;}
#top_section_01 h2 + p{font-weight: bold; font-size: 2em; margin-bottom: 30px;}


@media screen and (max-width: 750px) {
    #top_section_01 div h1{position: relative; width: 100%; top:-10px; left: 0; padding: 10px 0px;}
    #top_section_01 div h1 small{left: 0;text-align: center;}
    #top_section_01 div h1 small i{width: 0px;}
    
    #top_section_01 div ul {position: relative; top:4px; width: 100%;}
    #top_section_01 div ul li{width: 50%; font-size: 1.0em; background: rgba(6, 109, 42, 0.9);}
    #top_section_01 div ul li:before{border: 1px solid rgba(6, 109, 42, 0.7);}
}


#top_section_02{padding: 70px 0; margin: auto; width: 100%;}
#top_section_02{display: flex; flex-wrap: wrap;}
#top_section_02 div{width: 50%; position: relative;}
#top_section_02 div img{width: 100%; height: auto;}
#top_section_02 div ul{width: 100%; display: flex; flex-wrap: wrap;}
#top_section_02 div ul li{width: calc(50% - 2px); background: rgba(0,0,0,0.5); height: 50px; border: 1px solid #ccc; margin: 0px; transition : all 0.5s;}
#top_section_02 div ul li:hover{background: rgba(6, 109, 42, 0.9);}
#top_section_02 div ul li a{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 1.2em; font-weight: bold; }

#top_section_02 div:nth-child(1) ul{position: absolute; bottom: calc(54px);}
#top_section_02 div:nth-child(2) ul{position: absolute; bottom: calc(4px);}
#top_section_02 div:nth-child(1) ul li:nth-child(1){width: calc(100% - 0px);}
#top_section_02 div:nth-child(2) ul li{height: 76px;}
#top_section_02 div:nth-child(2){margin-bottom: 50px;}
#top_section_02 h2{width: 100%; text-align: center;}
#top_section_02 p{width: 100%; text-align: center; font-size: 2em;}

@media screen and (max-width: 750px) {
    #top_section_02 div{width: 100%; position: relative;}
    #top_section_02 div:nth-child(1) ul{position: absolute; bottom: calc(4px);}
}


#top_section_03{padding: 70px 0; margin: auto; width: 100%;}
#top_section_03{display: flex; flex-wrap: wrap;}
#top_section_03 h2{text-align: left; color: #333; font-weight: bold; text-shadow: 2px 3px 3px rgba(6, 109, 42, 0.3); z-index: 9; margin-bottom: 20px; padding-left: 50px;}

#top_section_03 ul{display: flex; margin-top: 30px;}
#top_section_03 ul li{display: flex; justify-content: center; align-items: center;}
#top_section_03 ul li:nth-child(1){font-size: 2em; font-weight: bold; width: 30%; text-align: left;}
#top_section_03 ul li:nth-child(2){width: 70%; }
#top_section_03 ul li:nth-child(2) img.sample_01{width: 40%; height: auto;}
#top_section_03 ul li:nth-child(2) img.arrow{width: 10%; height: auto; margin: auto 10px;}
#top_section_03 ul li:nth-child(2) img.sample_02{width: 40%; height: auto; }

@media screen and (max-width: 850px) {
    #top_section_03 ul{display: flex; margin-top: 30px; flex-wrap: wrap;}
    #top_section_03 ul li:nth-child(1){width: 100%; margin-bottom: 30px;}
    #top_section_03 ul li:nth-child(2){width: 100%;}
}


#top_section_04{padding: 0px 0; margin: 70px auto; width: 100%;}
#top_section_04{background-image: url("./img/top_006.png"); background-position: 100% 20%; background-size: 50%;
background-repeat: no-repeat;}
#top_section_04 div.bk_area{padding: 70px 30px;
/*display: flex; flex-wrap: wrap; align-content: center; align-items: center;*/ text-align: left;}

#top_section_04 div.bk_area h2{width: 100%; text-align: left; line-height: 100%; margin-bottom: 30px; font-weight: bold;}
#top_section_04 div.bk_area h2 span{display: block; font-size: 0.9em; margin-bottom: 20px;}
#top_section_04 div.bk_area div{width: 100%;}
#top_section_04 div.bk_area img{width: 55%; height: auto;}
#top_section_04 div.bk_area div p{width: 100%; text-align: left; margin-bottom: 1em; font-size: 1.2em;}

@media screen and (max-width: 750px) {
    #top_section_04{background-size: 80%;}
    #top_section_04 p{font-size: 1.0em;}
    #top_section_04 div.bk_area div{width: 100%;}
    #top_section_04 div.bk_area img{width: 80%; height: auto; margin: auto;}
}




#top_section_05{padding: 50px 0px; margin: auto; width: 100%; background: #FFF;}
#top_section_05{}
#top_section_05 h2{text-align: center;}
#top_section_05 h2+div{margin: auto;}
@media screen and (max-width: 850px) {
    #top_section_05 h2+div{margin: auto 20px; width: calc(100% - 40px)!important;}
}
/*
#top_section_05 div{width: calc(100% - 60px - 40px); height: 100px; overflow-y: scroll; text-align: left; border: 1px solid #aaa; padding: 20px;}*/

#top_section_05 div dl{width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px dotted #aaa;}
#top_section_05 div dl dt{width: 100px;}
#top_section_05 div dl dd{width: calc(100% - 100px);}
#top_section_05 div dl dd i{font-style: normal; background:red; font-size: 0.6em; padding: 2px 4px; color: #FFF; border-radius: 2px; position: relative; top:-4px; margin-left: 10px;}


/* https://chocolat5.com/tips/loop-image-animation/ ループさせたければこちらを参考に */
#top_section_06{padding: 50px 10px; margin: auto; width: calc(100% - 20px); background: #FFF;}
#top_section_06 ul{display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
#top_section_06 ul li{width: 22%; height: auto;}
#top_section_06 ul li img{width: 100%; height: auto;}
#top_section_06 ul:nth-child(2) li{width: 17%; height: auto;}
@media screen and (max-width: 750px) {
    #top_section_06 ul{flex-wrap: wrap; justify-content:space-around;}
    #top_section_06 ul li{width: 40%; margin-bottom: 10px;}
    #top_section_06 ul:nth-child(2) li{width: 40%; margin-bottom: 10px;}
}