@charset "utf-8";

/* CommonElements */

body {
color: #333;
font-size: 16px;
font-family:"Hiragino Sans","游ゴシック", YuGothic,sans-serif;
line-height: 2;
word-wrap : break-word;
}
.sp{display: none;}
img{
max-width: 100%;
height: auto;
}
a{
text-decoration: none;
color: #03466b;
transition: all 0.4s;
}
a:hover{
color: #43abc1;
}
main a:hover img{
opacity:0.8;
}
section,#cont02{
margin-top: -80px;
padding-top: 80px;
}
section{
margin-bottom: 60px;
}
.txt-r{text-align:right !important;}
.txt-c{text-align:center !important;}
.txt-l{text-align:left !important;}

.flex-box {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
.inner-box{
max-width:1080px;
overflow:hidden;
padding: 0 20px;
margin:0 auto;
}
p {
margin: 0 0 20px 0;
}
p.size-l{
font-size:18px;
}
p.size-s{
font-size:12px;
}
h2{
background: url(../images/logo.png) center 0 no-repeat;
text-align: center;
font-size: 40px;
font-weight: 200;
padding-top: 100px;
margin-bottom: 20px;
}
h2 span.color01{
color: #43abc1;
}
h2 span.color02{
color: #4384c1;
}
h3{
text-align: center;
font-weight: 200;
}
main ul{
list-style: disc;
margin:0 0 20px 20px;
}

.mb0 { margin-bottom:0px !important; }
.mb10 { margin-bottom:10px !important; }
.mb20 { margin-bottom:20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb80 { margin-bottom:80px !important; }
.mb90 { margin-bottom:90px !important; }
.mb100 { margin-bottom:100px !important; }
.ml10 { margin-left:10px !important; }
.ml20 { margin-left:20px !important; }
.ml30 { margin-left:30px !important; }
.ml40 { margin-left:40px !important; }
.ml50 { margin-left:50px !important; }
.mr10 { margin-right:10px !important; }
.mr15 { margin-right:15px !important; }
.mr20 { margin-right:20px !important; }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr50 { margin-right:50px !important; }
.mt0 { margin-top:0px !important; }
.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }

.pt10 { padding-top:10px !important; }
.pt20 { padding-top:20px !important; }
.pt30 { padding-top:30px !important; }
.pt40 { padding-top:40px !important; }
.pt50 { padding-top:50px !important; }

/* loading */
.loading{
background: #fff;
display:block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
}

/* header */
header{
width: 100%;
position: fixed;
background:rgba(255, 255, 255, 0.9);
z-index: 200;
padding: 10px 0;
top:0;
}
header .flex-item-l{
width: 42%;
padding-left:40px;
}
header .flex-item-r{
flex: 1;
padding:20px 40px 0 0;
}
header h1{
line-height: 1;
max-width: 360px
}
/* navi */
nav ul{
font-size: 13px;
line-height: 1.5;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
border-right: #a0b5bf 1px solid;
}
nav ul li{
flex: 1;
height: 60px;
text-align: center;
border-left: #a0b5bf 1px solid;
padding: 0 5px;
}
nav ul li.long{
flex: none;
width: 18%;
}
nav ul li a{
width: 100%;
height: 100%;
display:flex;
-webkit-align-items: center;
-webkit-justify-content: center;
align-items: center; /*上下中央*/
justify-content: center; /*左右中央*/
}
/* transition */
header,
header h1,
header .flex-item-l,
header .flex-item-r,
header.fixed nav ul li {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
/* Fixed */
header.fixed h1{max-width: 216px;}
header.fixed .flex-item-r{
padding:0 40px 0 0;
}
header.fixed nav ul li{
height: 50px;
}

/* contents */
.cf-box{
background: #fff;
margin-bottom: 30px;
  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.cf-box .cf-ttl {
display:flex;
background:url(../images/bg_cf.jpg) center -30px no-repeat;
height: 100%;
-webkit-align-items: center;
-webkit-justify-content: center;
align-items: center; /*上下中央*/
justify-content: center; /*左右中央*/
}
.cf-box .cf-ttl h3{
font-size: 24px;
margin: 0 15px 20px;
}
.cf-box .cf-ttl h3 a span{
display: block;
color: #fff;
font-size: 18px;
}
.cf-box .cf-ttl h3 a:hover{
color: #fff;
}
.cf-box .cf-cont{
line-height: 1.8;
font-weight: 600;
}
.cf-box .cf-cont p{
color: #333;
margin:35px 50px 20px 50px;
}
.cf-box .cf-cont p.small{
font-size: 12px;
font-weight: normal;
line-height: 1.6;
}
.cf-box .cf-cont h4{
background:url(../images/bg03.png) center 0 no-repeat;
color: #43abc1;
text-align: center;
padding:0 0 10px 0;
margin-bottom: 25px;
}
.cf-box .cf-cont a{
display: block;
font-size: 20px;
font-weight: 500;
color: #fff;
padding: 8px 0;
background-color: #63a311;
text-align: center;
border:#63a311 1px solid;
border-radius: 5px;
margin: 0 100px;
box-shadow:0px 2px 0px 0px #50850b;
-moz-box-shadow:0px 2px 0px 0px #50850b;
-webkit-box-shadow:0px 2px 0px 0px #50850b;
}
.cf-box .cf-cont a:hover{
background-color: #77b824;
}
.about-box{
color: #a9d4e1;
border-top: #567da2 1px solid;
border-bottom: #5e8db9 1px solid;
margin: 0 40px 30px 40px;
padding: 28px 0;
}
.about-box span,.about-box a{
color: #fff;
}
.about-box a:hover{
color: #fffeb4;
}
.about-box h3{
font-size: 20px;
font-weight: 500;
}
.about-box p{
font-size: 12px;
line-height: 1.8;
margin: 0;
}
.about-box .flex-item-l {
width: 28%;
display:flex;
-webkit-align-items: center;
-webkit-justify-content: center;
align-items: center; /*上下中央*/
justify-content: center; /*左右中央*/
}
.about-box .flex-item-r {
flex: 1;
}
.point-box01,.point-box02,.point-box03,.point-box04,.point-box05,.point-box06{
position: relative;
overflow: hidden;
margin-bottom: 60px;
}
.point-inner{
color: #fff;
width: 40%;
position: absolute;
top:90px;
left:70px;
z-index: 100;
}
.point-inner p{
padding-right: 30px;
}
.point-box01 .point-inner,
.point-box02 .point-inner{
top: auto;
bottom:45px;
}
.point-box04 .point-inner{
color: #333;
}
.point-box06 .point-inner{
color: #333;
top:0;
}
section#cont01{
margin-top: 120px;
background:#3873ac url(../images/bg01.jpg) no-repeat;
background-size: cover;
padding: 50px 0 0 0;
color: #fff;
}
section#cont01 h1{
margin-bottom: 18px;
}
section#cont01 h2{
background:none;
font-size: 24px;
font-weight: 500;
padding: 0;
margin-bottom: 15px;
}
section#cont03{
background: url(../images/bg04.jpg) 0 bottom no-repeat;
background-size: contain;
padding-bottom:60%;
}
section#cont03 .point-inner h3{
background: url(../images/bg_line01.png) 0 bottom repeat-x;
text-align: left;
font-size: 36px;
line-height: 1.4;
padding-bottom: 30px;
margin-bottom: 30px;
}
section#cont03 .point-box04 .point-inner h3{
background: url(../images/bg_line02.png) center bottom repeat-x;
}
section#cont03 .point-inner span{
display: block;
font-size: 70px;
}
section#cont04{
background: url(../images/bg05.jpg) 0 bottom no-repeat;
background-size: contain;
padding-bottom:18%;
margin: 0;
}
section#cont04 .flex-box{
background:rgba(255, 255, 255, 0.8);
border-top: #4b89b8 1px solid;
border-right: #4b89b8 1px solid;
}
section#cont04 .flex-item-l{
width: 50%;
border-left: #4b89b8 1px solid;
border-bottom: #4b89b8 1px solid;
padding-bottom: 20px;
}
section#cont04 .flex-item-r{
flex: 1;
border-left: #4b89b8 1px solid;
border-bottom: #4b89b8 1px solid;
padding-bottom: 20px;
}
section#cont04 .sns{
background:rgba(255, 255, 255, 0.8);
border-left: #4b89b8 1px solid;
border-right: #4b89b8 1px solid;
border-bottom: #4b89b8 1px solid;
padding: 45px 0 30px 0;
}
section#cont04 h3{
line-height: normal;
font-size: 24px;
margin-bottom: 30px;
}
section#cont04 h3 span{
display: block;
font-size: 14px;
font-weight: 600;
background: -webkit-linear-gradient(180deg,#4384c1,#43abc1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
section#cont04 .flex-box h3{
font-size: 30px;
font-weight: 300;
margin-bottom: 15px;
}
section#cont04 .flex-box p{
font-size: 14px;
margin: 0 70px 25px;
}
section#cont04 .flex-box p.image{
text-align: center;
margin-top: 70px;
}
section#cont04 .flex-box p.account{
font-weight: 600;
border-top: #4b89b8 1px solid;
border-bottom: #4b89b8 1px solid;
padding: 20px 0;
margin: 35px 70px 50px 70px;
}
section#cont04 a{
color: #43abc1;
font-weight: 600;
}
section#cont04 a:hover{
color: #4b89b8;
}
section#cont05 #output{
border: #4b89b8 1px solid;
padding: 50px 50px 30px 40px;
}
section#cont05 #output a:nth-child(n+6) {
display: none;
}
section#cont05 #output li{
list-style: none;
border-bottom: #b2d5ef 1px solid;
margin-bottom: 20px;
}
section#cont06{
margin-bottom: 110px;
}
section#cont06 .photo-block{
color: #fff;
background:#5190dc url(../images/bg06.jpg) 0 bottom no-repeat;
background-size: cover;
padding:70px 0 15% 0;
}
section#cont06 .photo-block .inner-box{
max-width: 780px;
}
section#cont06 .photo-block h2{
background: url(../images/logo02.png) center 0 no-repeat;
text-align: center;
font-size: 50px;
font-weight: 100;
padding-top: 90px;
margin-bottom: 85px;
}
section#cont06 .photo-block h2 span{
color: #74dbf1;
}
section#cont06 .photo-block h3{
font-size: 24px;
font-weight: 500;
margin-bottom: 60px;
}
section#cont06 .photo-block ul{
margin: 0 0 0 1.5em;
font-size: 20px;
font-weight: 200;
line-height: 2.4;
list-style: none;
text-indent: -1.5em;
}
section#cont06 .photo-block ul li:before{
content: "●";
margin-right: 10px;
}
section#cont06 ul.photo{
list-style: none;
margin:0 0 35px 0;
overflow: hidden;
}
section#cont06 ul.photo li{
width: 25%;
float: left;
line-height: 1;
}
section#cont06 ul.photo li img{
width: 100%;
}
section#cont06 p{
max-width: 998px;
margin: 0 auto;
font-size: 13px;
}

/* footer */
footer{
max-width: 998px;
margin: 0 auto;
padding-top: 20px;
}
footer h2{
font-size: 30px;
padding-top: 110px;
margin-bottom: 40px;
}
footer .flex-box{
font-size: 11px;
background: url(../images/bg_line02.png) center top no-repeat;
padding: 35px 0 50px 0;
}
.patagonia img{
vertical-align: middle;
}
@media only screen and (max-width: 997px) and (min-width: 768px){
header .flex-item-l{
width: 180px;
padding:25px 20px;
}
header.fixed .flex-item-l{
padding:0 20px ;
}
header .flex-item-r{
padding:20px 20px 0 0;
}
header.fixed .flex-item-r{
padding:0 20px 0 0;
}
nav ul{
font-size: 12px;
}
.cf-box .cf-cont p{
margin:20px;
}
.cf-box .cf-cont h4{
background:none;
margin:0 20px 20px 20px;
}
.cf-box .cf-cont a{
font-size: 16px;
margin: 0 20px 15px 20px;
}
.cf-box .cf-ttl {
background:url(../images/bg_cf.jpg) center 0 no-repeat;
}
.cf-box .cf-ttl h3{
line-height: 1.6;
margin: 0 10px 30px;
}
.cf-box .cf-ttl h3 span{
margin-top: 10px;
}
.about-box h3,
.about-box h3 span{
font-size: 16px !important;
}
.point-inner{
width: 45%;
top:30px;
left:30px;
}
.point-inner p{
padding-right: 0;
}
section#cont03 .point-inner h3{
font-size: 25px !important;
padding: 10px 0;
margin-bottom: 10px;
}
section#cont03 .point-inner span{
display: inline-block;
font-size: 25px !important;
margin-right: 10px;
}
section#cont04 .flex-box h3,
section#cont04 .flex-box p{
margin: 0 20px 20px;
}
section#cont04 .flex-box p.image{
margin-top: 20px;
}
section#cont04 .flex-box p.account{
padding: 15px 0;
margin: 20px;
}

}

@media only screen and (max-width: 767px){
body{
font-size: 14px;
line-height: 1.6;
}
.pc{display: none;}
.sp{display: block;}

header .flex-item-l{
width: 180px;
padding-left:20px;
}
header.fixed nav ul li{
height: 60px;
}
h2{
font-size: 20px !important;
}
h3{
font-size: 18px !important;
}
h3 span{
font-size: 14px !important;
}
section,#cont02{
margin-top: -70px;
padding-top: 70px;
}
.sp-one-col{
flex: none;
width: 100% !important;
}

.menu{
display: block;
width:30px;
height:30px;
position: absolute;
top:25px;
right:3%;
cursor: pointer;
overflow:hidden;
z-index: 500;
}
.menu1{ width:30px; height:1px; background-color: #03466b; top:0px; position:absolute; }
.menu2{ width:30px; height:1px; background-color: #03466b; top:10px; position:absolute; }
.menu3{ width:30px; height:1px; background-color: #03466b; top:20px; position:absolute; }

.menu1,.menu2,.menu3{
 transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out; /* Opera */
-moz-transition: all 0.5s ease-out; /* Firefox */
-webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }

.menuclick1{ top:10px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
-ms-transform: rotate(405deg); transform: rotate(405deg); }
.menuclick2		{ background-color:rgba(255,255,255,0);  }
.menuclick3		{ top:10px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
					-webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }
nav{
display: none;
position: absolute;
right: 0;
top: 71px;
width: 150px;
height: 100vh;
}
nav .g-navi{
width: 150px;
background:rgba(255, 255, 255, 0.9);
text-align: center;
}
nav ul{
border-right:none;
}
nav ul li,
nav ul li.long{
flex: none;
width: 100%;
border-bottom: #a0b5bf 1px solid;
border-left:none;
}
.cf-box .cf-ttl {
background:url(../images/bg_cf.jpg) center -130px no-repeat;
}
.cf-box .cf-ttl h3{
line-height: 1.6;
margin: 15px 10px;
}
.cf-box .cf-ttl h3 span{
margin-top: 10px;
}
.cf-box .cf-cont p{
margin:15px 12px;
}
.cf-box .cf-cont h4{
background:none;
margin:0 12px 10px 12px;
}
.cf-box .cf-cont a{
font-size: 16px;
margin: 0 12px 15px 12px;
}
.about-box {
width: 100%;
margin: 0;
padding: 15px 0;
}
.about-box h3 span{
font-size: 18px !important;
}
.flex-box.about-box {
flex-direction:column;
-webkit-flex-direction: column;
}
.about-box .flex-item-l {
width: 100%;
}
.point-box01,.point-box02,.point-box03,.point-box04,.point-box05,.point-box06{
margin-bottom: 20px;
}
.point-inner{
color: #333;
width: 100%;
position: static;
top:90px;
left:70px;
}
.point-inner p{
padding-right: 0;
}
section#cont01{
margin-top: 70px;
}
section#cont01 h1 img{
width: 60%;
}
section#cont03 .point-inner h3{
background: url(../images/bg_line02.png) center bottom repeat-x;
padding: 10px 0;
margin-bottom: 10px;
}
section#cont02 h3 span{
font-size: 18px !important;
}
section#cont03 .point-inner span{
display: inline-block;
font-size: 18px !important;
margin-right: 10px;
}
section#cont04 .flex-box p{
margin: 0 20px 20px;
}
section#cont04 .flex-box p.image{
margin-top: 20px;
}
section#cont04 .flex-box p.account{
padding: 15px 0;
margin: 20px;
}
section#cont05 #output{
border: #4b89b8 1px solid;
padding: 30px 30px 20px 20px;
}
section#cont06{
margin-bottom: 50px;
}
section#cont06 .photo-block{
padding:50px 0 15% 0;
}
section#cont06 .photo-block h2{
font-weight: 200;
padding-top: 110px;
margin-bottom: 30px;
}
section#cont06 .photo-block h3{
margin-bottom: 20px;
}
section#cont06 .photo-block ul{
margin: 0 0 0 1.8em;
font-size: 14px;
font-weight: 200;
line-height: 1.6;
text-indent: -1.8em;
}
section#cont06 ul.photo li{
width: 50%;
float: left;
}
footer h2{
margin-bottom: 20px;
}
footer .flex-box{
padding: 20px 0;
}
footer .flex-box{
flex-direction:column-reverse;
-webkit-flex-direction: column-reverse;
}
footer .flex-item{
text-align: center !important;
}

}