@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+Antique&family=Zen+Old+Mincho&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;margin: 0;padding: 0;}
img,abbr,acronym,fieldset{border:0;}

body{
font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
font-weight: 300;
-webkit-text-size-adjust:100%;
overflow-x: hidden;
color: #000;
background: #fff;
}

a{
text-decoration: none;
}

a:hover, .active{
text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

p,a,li,dt,dd{
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 400;
font-style: normal;
}

p{
font-size: 15px;
line-height: 2;
}

.zen-old-mincho-regular {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}
.zen-kaku-gothic-antique-regular {
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 400;
font-style: normal;
}

.eb-garamond{
font-family: "EB Garamond", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

.noto-sans-jp{
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight:500;
font-style: normal;
}


/* 共通
------------------------------------------------------------*/
.wrap{
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
img{
width: 100%;
height: auto;
vertical-align: bottom;
}

section{clear:both;}

h2.def{
font-size: 48px;
font-family: "EB Garamond", serif;
font-weight: 400;
line-height: 1.2;
margin-bottom: 70px;
}

h2.def span{
color: #45B8BB;
font-size: 12px;
display: block;
font-family: "Noto Sans JP", sans-serif;
font-weight:500;
}

h3{
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 12px;
margin-bottom: 10px;
}

h3 span{
font-size: 26px;
font-family: "EB Garamond", serif;
font-weight: 400;
line-height: 1;
margin-right: 15px;
}


a.more01{
height: 48px;
line-height: 48px;
color: #0B2728;
font-size: 14px;
width: 180px;
position: relative;
cursor: pointer;
display: inline-block;
border-bottom: 1px solid #ddd;
}

a.more01::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #0B2728;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

a.more01:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

a.more01:hover{
text-decoration: none;
}

a.more01::before{
position: absolute;
right: 0;
bottom: -1px;
content: '';
background: #0B2728;
width: 48px;
height: 48px;
border-bottom: 1px solid #0B2728;
background: url("../images/arrow.png") no-repeat center 14px;
background-size: 24px auto;
}

a.more01:hover::before{
position: absolute;
right: 0;
bottom: -1px;
content: '';
background: #0B2728;
width: 48px;
height: 48px;
border-bottom: 1px solid #0B2728;
background: url("../images/arrow.png") no-repeat center 12px;
background-size: 28px auto;
}


/* ナビ
------------------------------------------------------------*/
.spnavi{
display: none;
}

#mainnav{
display: -webkit-flex;
display: flex;
justify-content: space-between;
padding: 10px 50px 10px;
}

#mainnav h1{
width: 180px;
}

#mainnav ul{
display: -webkit-flex;
display: flex;
justify-content: space-between;
width: 30%;
}

#mainnav ul li{
display: -webkit-flex;
display: flex;
align-items: center;
position: relative;
}

#mainnav ul li a{
font-size: 14px;
display: inline-block;
position: relative;
cursor: pointer;
text-decoration: none;
}

#mainnav a::after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
bottom: 0px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s;
background: #0B2728;
}

#mainnav a:hover::after {
transform: scale(1, 1);
}



#fixed-header {
position: fixed;
top: -70px;  
width: 100%;
background-color: rgba(255,255,255,0.8);
box-sizing: border-box;
transition: .5s;
z-index: 9999;
}
#fixed-header.is-show {
top: 0;
}

#fixed-header a{
color: #0B2728;
font-size: 14px;
font-family: "EB Garamond", serif;
}

#fixed-header a::after{
height: 0;
}

/* メイン画像エリア
------------------------------------------------------------*/
header h1{
position: absolute;
    top: 30px;
    left: 50px;
    width: 180px;
    z-index: 3;
}
header .inbox{
position: relative;
}

header h2{
position: absolute;
bottom: 60px;
left: 70px;
color: #fff;
z-index: 2;
font-size: 26px;
line-height: 1.8;
font-family: "Zen Old Mincho", serif;
font-weight: 500;
}


header ul.link{
position: absolute;
top: 50px;
right: 50px;
z-index: 2;
}

header ul.link li{
margin-bottom: 20px;
display: flex;
flex-flow: column nowrap;
}

header ul.link li a{
font-size: 14px;
line-height: 1.2;
font-family: "EB Garamond", serif;
color: #fff;
text-align: right;
display: inline-block;
position: relative;
margin-left: auto;
}

header ul.link li a::after{
position: absolute;
right: 0;
content: '';
width: 100%;
height: 1px;
bottom: 0px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s;
background: #fff;
}

header ul.link li a:hover::after {
transform: scale(1, 1);
}

header ul.link li a:hover{
text-decoration: none;
}

/* スクロールダウンの位置 */
.scroll {
z-index: 2;
position: absolute;
right: 50px;
bottom: 0px;
width: 52px;
height: 160px;
}

.scroll span{
display: block;
writing-mode: vertical-rl;
font-family: "EB Garamond", serif;
margin-left: 40px;
font-size: 15px;
line-height: 1;
color: #fff;
}


/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: #fff;
top: 0px;
content: "";
height: 160px;
left: 0;
margin: auto;
position: absolute;
width: 1px;
z-index: 2;
}
/* 線の背景色 */
.scroll::after {
background-color: #ccc;
top: 0px;
content: "";
height: 160px;
left: 0;
margin: auto;
position: absolute;
width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
}


/* スライダー画像 */
.swiper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}

.swiper-slide img {
height: auto;
width: 100%;
vertical-align: bottom;
}



/* SEC01 Service
------------------------------------------------------------*/
#sec01{
background: #F3FBFB;
padding: 200px 160px 280px;
}

#sec01 img{
margin-bottom: 35px;
}

#sec01 .box01 .left{
width: 58%;
}

#sec01 .box01 .right{
padding-top: 100px;
width: 32%;
}

#sec01 .box02{
padding: 0 60px;
}

#sec01 .box02 .left{
width: 36%;
}

#sec01 .box02 .right{
padding-top: 165px;
width: 50%;
}

#sec01 .text_box{
position: relative;
padding-left: 50px;
}

#sec01 .text_box .nomber{
position: absolute;
top: 0;
left: 0;
color: #45B8BB;
font-size: 12px;
font-family: "EB Garamond", serif;
font-weight: 500;
}

#sec01 .text_box p{
margin-bottom: 30px;
}

#sec01 .img_box{
overflow: hidden;
} 

#sec01 img {
-moz-transition: -moz-transform 0.4s linear;
-webkit-transition: -webkit-transform 0.4s linear;
-o-transition: -o-transform 0.4s linear;
-ms-transition: -ms-transform 0.4s linear;
transition: transform 0.4s linear;
}
#sec01 img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

/* SEC02 Concept 
------------------------------------------------------------*/
#sec02{
padding: 12px 160px 280px;
background: url("../images/bg_color.png") repeat-x center top #FBFFFF;
background-size: auto 62px;
}


#sec02 .inbox{
width: 71.43%;
}

#sec02 .box02 .left{
width: 35.75%;
}

#sec02 img{
margin-bottom: 35px;
}

#sec02 .box02 h4{
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 26px;
line-height: 1.8;
}

#sec02 .box02 .right{
width: 56.25%;
}

#sec02 .box02 .right p{
margin-bottom: 20px;
}


/* SEC03 Company 
------------------------------------------------------------*/
#sec03{
background:#FBFFFF;
padding: 0px 0px 240px;
}

#sec03 .left{
width: 48.61%;
position: relative;
}

#sec03 .right{
width: 41.67%;
padding-top: 30px;
}

#sec03 .right dl{
margin-right: 116px;
display: flex;
flex-wrap: wrap;
border-top: 1px solid #ddd;
}

#sec03 .right dt{
width: 45%;
padding: 35px 0;
border-bottom: 1px solid #ddd;
}

#sec03 .right dd{
width: 55%;
padding: 35px 0;
border-bottom: 1px solid #ddd;
}

#sec03 .right dd a{
font-size: 14px;
line-height: 1.2;
height: 28px;
color: #0B2728;
text-align: right;
display: inline-block;
position: relative;
margin-left: auto;
padding-right: 35px;
}

#sec03 .right dd a::after{
position: absolute;
right: 0;
content: '';
width: 100%;
height: 1px;
bottom: 0px;
transform: scale(1, 1);
background: #0B2728;
}


#sec03 .right dd a::before {
position: absolute;
right: 0;
bottom: 0;
content: '';
background: #0B2728;
width: 28px;
height: 28px;
background: url("../images/arrow.png") no-repeat center 0px;
background-size: auto;
background-size: 22px auto;
}

#sec03 .right dd a:hover{
text-decoration: none;
}

#sec03 .right dd a:hover::before {
background: url("../images/arrow.png") no-repeat center -2px;
background-size: auto;
background-size: 24px auto;
}



/* SEC04 Recruit 
------------------------------------------------------------*/
#sec04{
background:#FBFFFF;
padding: 0px 220px 240px;
}

#sec04 .right{
width: 71%;
border-top: 1px solid #ddd;
}

#sec04 .right p{
line-height: 1.6;
margin-bottom: 20px;
}

#sec04 .right .box{
border-bottom: 1px solid #ddd;
padding: 50px 0;
}

#sec04 .right .box h3{
margin-bottom: 30px;
}

#sec04 .right .box h3 span{
font-size: 22px;
}


/* SEC05 Contact  
------------------------------------------------------------*/
#sec05{
background: url("../images/bg.png") no-repeat #E9F5F5;
background-size: cover;
text-align: center;
padding: 170px 0px 170px;
}

#sec05 p{
margin-bottom: 20px;
}

/* footer  
------------------------------------------------------------*/
#footer{
background:#0B2728;
color: #fff;
padding: 120px 75px 120px;
}

#footer .wrap{
justify-content: flex-start;
}

#footer .center{
margin-left: 50px;
}

#footer .center p{
line-height: 1.3;
font-size: 14px;
margin-bottom: 20px;
}

#footer .center p span{
margin-bottom: 10px;
display: block;
}

#footer .center a{
font-size: 14px;
line-height: 1.5;
text-decoration: underline;
padding-left: 28px;
display: block;
position: relative;
}

#footer .center a::after{
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 30px;
content: "";
text-decoration: none;
background: url("../images/map.png") no-repeat left top;
background-size: 24px auto;
}


#footer .right{
margin-left: auto;
display: flex;
flex-flow: column nowrap;
width: 30%;
}

#footer .right div{
margin-left: auto;
}

#footer .right ul{
padding: 35px 0;
display: flex;
justify-content: space-between;
}

#footer .right ul li{
position: relative;
height: 28px;
}

#footer .right ul li a.def{
font-size: 12px;
display: inline-block;
position: relative;
cursor: pointer;
text-decoration: none;
}

#footer .right ul li a.def::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

#footer .right ul li a.def:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

#footer .right ul li:nth-child(4),
#footer .right ul li:nth-child(5){
width: 22px;
height: 28px;
}

#footer .right ul li:nth-child(4) a::after{
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 28px;
content: "";
text-decoration: none;
background: url("../images/sns01.png") no-repeat center center;
background-size: 22px auto;
}

#footer .right ul li:nth-child(5) a::after{
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 28px;
content: "";
text-decoration: none;
background: url("../images/sns02.png") no-repeat center center;
background-size: 22px auto;
}

#footer .right ul.link01{
border-bottom: 1px solid #fff;
}

#footer .right p{
text-align: right;
margin-left: auto;
}

#footer a{
color: #fff;
}

#footer ul{
display: flex;
}

#footer a.btn01{
color: #fff;
background: #45B8BB;
width: 192px;
line-height: 36px;
border-radius: 20px;
text-align: center;
display: block;
font-size: 12px;
font-weight: 500;
}

#footer a.btn01:hover{
color: #45B8BB;
background: #fff;
text-decoration: none;
}

#footer .logo{
width: 200px;
}

img.sp{
display: none;
}
#navArea{
display: none;
}


#primary{
background: #F3FBFB;
padding: 100px 160px 100px;
width: 100%;
box-sizing: border-box;
}

#primary .form{
background: #fff;
margin: 0 auto;
padding: 60px;
max-width: 1000px;
box-sizing: border-box;
text-align: center;
}

#primary .form input,
#primary .form textarea{
padding: 10px;
border:1px solid #ddd;
}

#primary .form textarea{
width: 450px;
}

#primary .form dl{
width: 450px;
margin: 0 auto;
}

#primary .form dt{
text-align: left;
width: 450px;
}

#primary .form dd{
padding-bottom: 20px;
}

#primary input.submit:hover {
  color: #45B8BB;
  background: #fff;
  text-decoration: none;
}
#primary input.submit{
  color: #fff;
  background: #45B8BB;
  width: 160px;
  line-height: 50px;
  border-radius: 25px;
  text-align: center;
  display: block;
  font-size: 14px;
  font-weight: 500;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  padding: 0;
  border: 0px solid #000;
  margin: 0 auto;
}


.entry-header{
display: none;
}



/* RESPONSIVE 設定
------------------------------------------------------------*/
@media only screen and (max-width: 1000px){
#sec01 {
  padding: 100px 80px 100px;
}

#sec02 {
  padding: 12px 40px 100px;
}
#sec02 .box02 h4 br{
display: none;
}

#sec03 .right dl {
  margin-right: 58px;
}

#sec04 {
  padding: 0px 110px 100px;
}

#sec05 {
  padding: 100px 0px 100px;
}

#footer {
  background: #0B2728;
  color: #fff;
  padding: 100px 30px 100px;
}

#footer .center {
  margin-left: 20px;
}
#footer .right {
  width: 45%;
}
#footer .logo {
  width: 160px;
}


}


@media only screen and (max-width: 799px){
#navArea{
display: block;
}

#navArea h1{
width: 140px;
}

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  height: 546px;
  background: #F3FBFB;
  overflow: hidden;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
  padding: 16px 16px 100px;
  box-sizing: border-box;
}
.open nav {
  right: 0;
  opacity: 1;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 25px;
  right: 15px;
  width: 25px;
  height: 35px;
  transition: all .5s;
  cursor: pointer;
z-index: 9999;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width:25px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 11px;
}

/*=============================
#btn03
=============================*/
#btn03.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
#btn03.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
  top: -9px;
}
#btn03.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#btn03.active span:nth-of-type(3) {
  opacity: 0;
}

#navArea ul{
text-align: center;
margin-top: 80px;
}

#navArea ul li{
margin-bottom: 40px;
}

#navArea ul li:nth-child(4) a{
width: 192px;
line-height: 36px;
border-radius: 20px;
text-align: center;
display: block;
font-size: 12px;
font-weight: 500;
background: #45B8BB;
padding: 0;
margin: 0 auto;
color: #fff;
}

#navArea ul li:nth-child(4) a:hover {
  color: #45B8BB;
  background: #fff;
  text-decoration: none;
}


#navArea ul li:nth-child(5){
margin-right: 10px;
}


#navArea ul li:nth-child(6){
margin-left: 10px;
}

#navArea ul li:nth-child(5),
#navArea ul li:nth-child(6){
width: 15px;
height: 28px;
display: inline-block;
text-align: center;
}

#navArea ul li:nth-child(5) a::after{
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 18px;
content: "";
text-decoration: none;
background: url("../images/sns0102.png") no-repeat center center;
background-size: 15px auto;
}

#navArea ul li:nth-child(6) a::after{
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 18px;
content: "";
text-decoration: none;
background: url("../images/sns0202.png") no-repeat center center;
background-size: 15px auto;
}



/* 共通
------------------------------------------------------------*/
.wrap{
display: block;
padding: 0 16px;
}

img.pc{
display: none;
}

img.sp{
display: block;
}

h2.def{
font-size: 48px;
line-height: 1.2;
margin-bottom: 40px;
}

h2.def span{
font-size: 12px;
}

h3{
font-size: 12px;
margin-bottom: 10px;
}

h3 span{
font-size: 26px;
line-height: 1;
}


a.more01{
height: 48px;
line-height: 48px;
font-size: 14px;
width: 180px;
}

a.more01::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;

}

a.more01:hover::after {
}

a.more01:hover{
}

a.more01::before{
position: absolute;
right: 0;
bottom: -1px;
content: '';
width: 48px;
height: 48px;
}

a.more01:hover::before{
position: absolute;
right: 0;
bottom: -1px;
content: '';
width: 48px;
height: 48px;
}


/* ナビ
------------------------------------------------------------*/
/* メイン画像エリア
------------------------------------------------------------*/
header h1{
position: absolute;
    top: 15px;
    left: 15px;
    width: 130px;
    z-index: 2;
}


header h2{
position: absolute;
    bottom: 24px;
    left: 24px;
    font-size: 21px;
}


header ul.link{
display: none;
}

header ul.link li{
margin-bottom: 20px;
}

header ul.link li a{
font-size: 14px;
line-height: 1.2;
}

/* スクロールダウンの位置 */
  .scroll {
    z-index: 2;
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: 30px;
    height: 160px;
  }
.scroll span{
writing-mode: vertical-rl;
margin-left: 20px;
font-size: 14px;
line-height: 1;
}


/* SEC01 Service
------------------------------------------------------------*/
#sec01{
padding: 120px 0px 150px;
}

#sec01 h2{
padding-left: 15px;
}

#sec01 img{
margin-bottom: 60px;
}

#sec01 .box01 .left{
width: 100%;
}

#sec01 .box01 .right{
padding-top: 60px;
width: 100%;
}

#sec01 .box02{
padding: 0 10px;
}

#sec01 .box02 .left{
width: 100%;
padding-top: 30px;
}

#sec01 .box02 .right{
padding-top: 30px;
width: 100%;
}

#sec01 .text_box{
padding-left: 50px;
}

#sec01 .text_box .nomber{
position: absolute;
top: 0;
left: 0;
font-size: 12px;
}

#sec01 .text_box p{
margin-bottom: 30px;
}

/* SEC02 Concept 
------------------------------------------------------------*/
#sec02{
padding: 12px 0px 140px;
background-size: auto 62px;
}

#sec02 .box02{
padding: 0;
}

#sec02 .inbox{
width: 100%;
}

#sec02 .box02 .left{
width: 100%;
}

  #sec02 .box02 h4 br {
    display: block;
  }

#sec02 img{
margin-bottom: 35px;
}

#sec02 .box02 h4{
font-size: 26px;
line-height: 1.8;
margin-bottom: 60px;
}

#sec02 .box02 .right{
width: 100%;
}

#sec02 .box02 .right p{
margin-bottom: 20px;
}


/* SEC03 Company 
------------------------------------------------------------*/
#sec03{
background:#FBFFFF;
padding: 0px 0px 120px;
}

#sec03 .wrap{
  display: flex;
  flex-flow: column nowrap;
  padding: 0;
}

#sec03 .left{
width: 100%;
order: 2;
}

#sec03 .right{
width: 100%;
padding-top: 0px;
order: 1;
padding: 0 16px 60px;
box-sizing: border-box;
}

#sec03 .right dl{
margin-right: 0px;
}

#sec03 .right dt{
width: 35%;
padding: 35px 0;
}

#sec03 .right dd{
width: 65%;
padding: 35px 0;
}

#sec03 img{
vertical-align: top;
}



/* SEC04 Recruit 
------------------------------------------------------------*/
#sec04{
padding: 0px 0px 120px;
}

#sec04 .right{
width: 100%;
}

#sec04 .right p{
line-height: 1.6;
margin-bottom: 20px;
}

#sec04 .right .box{
padding: 50px 0;
}

#sec04 .right .box h3{
margin-bottom: 30px;
}

#sec04 .right .box h3 span{
font-size: 22px;
}


/* SEC05 Contact  
------------------------------------------------------------*/
#sec05{
padding: 120px 0px 120px;
background: url("../images/bg_sp.png") no-repeat #E9F5F5;
background-size: auto 100%;
}

#sec05 p{
margin-bottom: 20px;
}

/* footer  
------------------------------------------------------------*/
#footer{
padding: 100px 20px 100px;
}

#footer .wrap{
display: flex;
  flex-flow: column nowrap;
justify-content:center;
}
#footer .left{
text-align: center;
margin-bottom: 30px;
}

#footer .left .logo{
margin: 0 auto;
}

#footer .center{
margin-left: 0px;
text-align: center;
margin-bottom: 50px;
}

#footer .center p{
line-height: 1.3;
font-size: 14px;
margin-bottom: 20px;
}

#footer .center p span{
margin-bottom: 10px;
}

#footer .center a{
font-size: 14px;
line-height: 1.5;
padding-left: 28px;
width: 80px;
margin: 0 auto 50px;
}

#footer .right{
width: 100%;
}

#footer .right div {
  margin: auto;
}

#footer .right ul{
padding: 35px 0;
display: block;
text-align: center;
}

#footer .right ul li{
position: relative;
height: 28px;
width: 32%;
display: inline-block;
}

#footer .right ul li a.def{
font-size: 12px;
}

#footer .right ul li:nth-child(4),
#footer .right ul li:nth-child(5){
width: 34px;
height: 28px;
margin-top: 35px;
}

#footer .right ul li:nth-child(4) a::after{
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 28px;
content: "";
text-decoration: none;
background: url("../images/sns01.png") no-repeat center center;
background-size: 22px auto;
}

#footer .right ul li:nth-child(5) a::after{
position: absolute;
top: 0;
left: 12px;
width: 22px;
height: 28px;
content: "";
text-decoration: none;
background: url("../images/sns02.png") no-repeat center center;
background-size: 22px auto;
}

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

#footer a.btn01{
width: 192px;
line-height: 36px;
border-radius: 20px;
text-align: center;
display: block;
font-size: 12px;
font-weight: 500;
}

#footer .right ul.link02 li{
width: auto;
}

#footer .right ul.link02 li:nth-child(2){
padding: 0 20px;
}

#footer .right ul.link02 li a.def{
font-size: 10px;
}

#footer .right p.copy{
font-size: 12px;
}

#footer .logo{
width: 130px;
}

#primary{
padding: 60px 10px 60px;
}

#primary .form{
padding: 20px;
width: 100%;
box-sizing: border-box;
}

#primary .form input,
#primary .form textarea{
width: 90%;
}

#primary .form textarea{
width: 100%;
box-sizing: border-box;
}

#primary .form dl{
width: 100%;
box-sizing: border-box;
}

#primary .form dt{
text-align: left;
width: 100%;
box-sizing: border-box;
}

#primary .form dd{
padding-bottom: 20px;
}




}