@charset "UTF-8";
/* CSS Document */
*,*::before,*::after{box-sizing:border-box;margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}
ul[role='list'],ol[role='list']{list-style:none}
body{min-height:100vh;line-height:1.8}
h1,h2,h3,h4,button,input,label{line-height: 1.4;}
h1,h2,h3,h4{text-wrap:balance}
a:not([class]){text-decoration-skip-ink:auto;color:currentColor}
img,picture{max-width:100%;display:block}
input,button,textarea,select{font:inherit}
textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
a,button{text-decoration: none;color: inherit;}
table{border-collapse: collapse;border-spacing: 0;}
/*
font-family: "IBM Plex Sans JP", sans-serif;4567
font-family: "Zen Old Mincho", serif;45679
font-family: "Zen Kaku Gothic New", sans-serif;3457
font-family: "Lilita One", sans-serif;4
*/

/*共通*/
html {
font-size: 62.5%;
}
body{
font-size: 1.6rem;
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 400;
position: relative;
}
a,button{
display: block;
transition: 0.5s;
}
a:hover,button:hover {
opacity: 0.6;
}
p{
line-height: 1.8;
}
.contents{
max-width: 1300px;
margin: 0 auto;
}
.contents870{
max-width: 900px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.t-line{
background: url("/img/title_line.png") no-repeat bottom center / 10px;
height: 100px;
width: 10px;
position: absolute;
top: 0;
left: calc(50% - 0.5rem);
z-index: 1;
}
.js-scroll-animation{
position: relative;
}
.title{
vertical-align: bottom;
}
.title h1,.title h2{
font-family: "Lilita One", sans-serif;
font-size: 4.8rem;
min-height: 5.1rem;/*葉っぱの高さ*/
vertical-align: bottom;
text-align: center;
}
.title img{
display: inline-block;
margin-right: 1rem;
}
.title h3{
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 1.9rem;
vertical-align: bottom;
letter-spacing: 0.2rem;
text-align: center;
margin-top: 0;
border: none!important;
}
button{
background: #ffc700 url("/img/top_arrow.png") no-repeat center right 1rem / 7px auto;
border: 2px solid #231815;
border-radius: 50px;
padding: 0.7rem 4rem;
box-shadow: 2px 2px rgba(0, 0, 0, 1);
margin: 5rem auto auto;
font-family: "Lilita One", sans-serif;
letter-spacing: 0.4rem;
}
@media screen and (max-width: 768px) {
body{font-size: 1.4rem;}
a[href^="tel:"] {pointer-events: none;}
.t-line{background: url("/img/title_line.png") no-repeat bottom center / 8px;height: 40px;width: 8px;}
.title h1,.title h2{font-size: 3rem;min-height: 2.5rem;/*葉っぱの高さ*/}
.title img{margin-right: .5rem;width: 31px;}
.title h3{font-size: 1.7rem;}
button{margin: 3rem auto 0;padding: 0.7rem 2.5rem;}
}

.fadeInTrigger{
opacity: 0;
}
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeInAnime{
  from {opacity: 0;transform: translateY(30px); }
  to {opacity: 1;transform: translateY(0);}
}

/*ヘッダー*/
header {
width: 100%;
position: relative;
}
header .top-bar{
background: #003576;
padding: 0.7rem;
position: relative;
z-index: 1;
}
header .top-bar img{
width: 314px;
}
.span-container,
.checkbox {
  width: 31px;
  height: 31px;
  position: fixed;
  right: 12px;
  top: 7px;
  padding: 3px;
}
.checkbox {
  opacity: 0;
  z-index: 30;
}
.span-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  z-index: 29;
}
.span-container span {
  width: 100%;
  height: 3px;
  background: #12579b;
  transition: all 250ms ease-out;
  transform-origin: 0 0;
}
.checkbox:checked ~ .span-container span:nth-last-child(1) {
    transform: rotate(-45deg) translate(-1px, 0px);
    background: #fff;
}
.checkbox:checked ~ .span-container span:nth-last-child(2) {
    transform: rotate(0deg) scale(0.2, 0.2);
    opacity: 0;
}
.checkbox:checked ~ .span-container span:nth-last-child(3) {
    transform: rotate(45deg) translate(0px, -1px);
    background: #fff;
}
nav {
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background: rgba(18,87,155,0.9);
  transition: all 250ms ease-out;
  transform: translateX(-100%);
  padding-bottom: 1rem;
  margin-top: -12.7%;
  z-index: 28;
}
nav a {
  margin: 1rem auto;
}
.checkbox:checked ~ nav {
  transform: translateX(0%);
}
nav ul{
list-style: none;
text-align: center;
}
nav ul li{
display: inline-block;
}
nav ul.sns li{
width: 50px;
}
nav ul.navi li{
display: block;
background: #fff url("/img/top_arrow.png") no-repeat center right 1rem / 7px auto;
border: 2px solid #231815;
border-radius: 50px;
padding: 0.7rem 2rem;
box-shadow: 2px 2px rgba(0, 0, 0, 1);
margin-bottom: 1.5rem;
width: 250px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 900;
letter-spacing: 0.2rem;
}
nav ul.navi .active li{
background-color: #d3ecfb;
}
nav ul.navi li:hover {
background-color: #d3ecfb;
opacity: 1;
}
nav ul.navi a {
padding: 0;
margin: 0;
}
@media screen and (min-width: 768px) {/*768以上*/
header .top-bar{
text-align: center;
}
header .top-bar img{
margin: 0 auto;
}
header > ul.sns{
list-style: none;
position: absolute;
top:12px;
right: 0.7rem;
z-index: 2;
}
header > ul.sns li{
margin-left: 0.5rem;
}
header > ul.sns li,header > ul.sns li a{
display: inline-block;
width: 23px;
}
header > ul.sns li img{
width: 100%;
}
.checkbox,.span-container{
display: none;
}
nav{
position: relative;
left: none;
top: none;
width: auto;
height: 100%;
z-index: 10;
background: transparent;
transition: none;
transform: none;
margin-top: 0;
}
nav ul.navi{
margin-top: 2rem;
display:flex;
justify-content: space-between;
padding: 0 1.5rem 0;
}
nav ul.navi li{
margin: 0 0.5rem;
width: 160px;
}
.fixed{
position: fixed;
top: 0;
left: calc(50% - 522px);
}
.fixed .g-nav-menu li{
line-height: 40px;
}
}
/*animation,head-img*/
#anime{
max-width: 2000px;
width: 100%;
height: 1008px;
margin: -10rem auto 0;
position: relative;
overflow: hidden;
}
#anime > img{
display: block;
position: absolute;
top: 9rem;
right: 5rem;
z-index: 2;
}
#lottie{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width:2000px;
overflow: hidden;
text-align: center;
opacity: 1;
margin: auto;
}
#head-img{
max-width: 2000px;
width: 100%;
height: 1000px;
margin: -20rem auto 0;
position: relative;
background-size: cover;
background-position: center center;
}
@media screen and (max-width: 1500px) {
#head-img{height: 700px;margin-top: -15rem;}
}
@media screen and (max-width: 1300px) {
#anime{height: 850px;}
#anime > img{right: 1.5rem;width: 250px;}
#lottie{width:1700px;}
#head-img{height: 600px;margin-top: -10rem;}
}
@media screen and (max-width: 768px) {/*768以下*/
#anime{height: 430px;margin: -7rem auto 0;}
#anime > img{top: 10rem;right: 0;width: 150px;}
#lottie{width:830px;}
#head-img{height: 500px;margin-top: -10rem;}
}
@media screen and (max-width: 500px) {/*768以下*/
#anime{height: 350px;margin-top: -5rem;}
#anime > img{top: 5.5rem;right: 0.5rem;width: 90px;}
#lottie{width:730px;}
#head-img{height: 250px;margin-top: -5rem;}
}

/*右側固定メニュー*/
.menu_r{
position: fixed;
cursor: pointer;
z-index: 20;
top: 20%;
right: 0;
width: 7rem;
}
.menu_r a img{
width: 100%;
}
@media screen and (max-width: 768px) {
.menu_r{top: auto;bottom: 0;right: 1rem;width: auto;}
.menu_r .sp-show{display: inline-block;}
.menu_r a img{width: 5rem;}
}

/*NEWS*/
#title-cloud{
position: relative;
background: url("/img/cloud.png") no-repeat top center / auto 261px;
margin: -26rem auto 0;
padding: 26rem 0 8rem;
overflow: hidden;
max-width: 2000px;
}
#title-cloud .t-line{
top: 15rem;
}
.i-news .icon{
position: absolute;
top:30%;
right: calc((100% - 1300px)/2 + 15rem);
}
#title-cloud .box{
width: 100%;
padding: 0 10rem;
margin-top: 3rem;
position: relative;
}
#title-cloud table{
margin:0 auto;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
}
#title-cloud th{
width: 100px;
padding: 2rem 4rem 0.3rem 0;
letter-spacing: 0.2rem;
}
#title-cloud table td{
padding: 2rem 0 0.3rem 0;
}
#title-cloud table td:hover{
border-bottom: 1px solid #000;
}
#title-cloud .contents > a{
position: absolute;
bottom: 3rem;
left: calc((100% - 1300px)/2 + 3rem);
width: 200px;
}
#title-cloud .contents > a img{
width: 100%;
}
@media screen and (max-width: 1300px) {
.i-news .icon{right: 3rem;width: 130px;}
#title-cloud .contents > a{bottom: 1.5rem;left: 1.5rem;width: 170px;}
}
@media screen and (max-width: 768px) {
#title-cloud{
background: url("/img/cloud.png") no-repeat top center / auto 140px;
margin: -14rem auto 0;
padding: 14rem 0 3rem;
width: 100%;
}
#title-cloud .t-line{top: 10rem;}
.i-news .icon{top:10rem;right: 1rem;width: 60px;}
#title-cloud .box{padding: 0 1.5rem;margin-top: 1.5rem;}
#title-cloud th{width: 80px;padding: 1.5rem 1.5rem 0.3rem 0;}
#title-cloud table td{padding: 1.5rem 0 0.3rem 0;}
#title-cloud .contents > a{bottom: 1.5rem;left: 1.5rem;width: 80px;}
}
@media screen and (max-width: 500px) {
#title-cloud{
background: url("/img/cloud.png") no-repeat top center / auto 100px;
margin: -10rem auto 0;
padding: 10rem 0 3rem;
}
#title-cloud .t-line{top: 6rem;}
}

/*ABOUT*/
#i-about{
position: relative;
background-image: url("/img/i-about_b01.png"),url("/img/i-about_b02.png"),url("/img/i-about_back.jpg");
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: top 25rem left calc((100% - 1300px)/2 + 4rem), top 40rem right calc((100% - 1300px)/2 - 5rem), top center;
background-size: 450px, 210px, cover;
padding: 8rem 1.5rem 0rem;
}
#i-about .t-line{
height: 72px;
}
#i-about .contents{
position: relative;
}
#i-about .box{
display: flex;
justify-content: space-between;
margin-top: 5rem;
padding: 0 8rem 0 13rem;
}
#i-about .inner1{
width: 45%;
margin-right: 10%;
padding-bottom: 5rem;
}
#i-about .inner1 h4{
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-size: 3.2rem;
letter-spacing: 0.4rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
line-height: 170%;
}
#i-about .inner1 img{
width: 100%;
display: block;
margin-top: 3rem;
}
#i-about .inner2{
width: 45%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3rem 3rem 0 0;
padding: 5rem 5rem 5rem;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-size: 1.7rem;
letter-spacing: 0.1rem;
}
@media screen and (max-width: 1300px) {
#i-about{
background-image: url("/img/i-about_b01.png"),url("/img/i-about_b02.png"),url("/img/i-about_back.jpg");
background-position: top 25rem left -18rem, top 40rem right -5rem, top center;
background-size: 450px, 210px, cover;
}
}
@media screen and (max-width: 1000px) {
#i-about{background-image: url("/img/i-about_b01.png"),url("/img/i-about_b02.png"), url("/img/i-about_back_sp.jpg");padding: 6rem 1.5rem;}
#i-about .box{padding: 0 5rem;}
#i-about .inner1 h4{letter-spacing: 0.2rem;}
}
@media screen and (max-width: 768px) {
#i-about{background-position: top 5rem left -15rem, top 60rem right -5rem, top center;
background-size: 450px, 210px, cover;
padding: 5rem 1.5rem 0rem;}
#i-about .t-line{height: 40px;}
#i-about .box{display: block;margin-top: 3rem;padding: 0;}
#i-about .inner1{width: 100%;text-align: center;margin-right: 0;padding-bottom: 1.5rem;}
#i-about .inner1 h4{font-size: 2rem;text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);}
#i-about .inner1 img{width: 100%;max-width: 250px;display: inline-block;margin-top: 2rem;}
#i-about .inner2{width: 100%;margin-top: 0rem;padding: 2rem 2rem 4rem;font-size: 1.5rem;}
}

/*会社概要*/
#a-over{
position: relative;
background: #fff url("/img/dod-gray.png") repeat center;
text-align: center;
padding: 9rem 0 20rem;
}
#a-over .t-line{
height: 90px;
}
#a-over .box {
margin-top: 5rem;
padding: 0 1.5rem;
}
#a-over .contents{
position: relative;
}
#a-over .box table{
width: 100%;
max-width: 860px;
margin: 0 auto;
border: 2px solid #000;
color: #3d3736;
background: #fff;
font-weight: 600;
}
#a-over .box table th,#a-over .box table td{
padding: 1.5rem 2.5rem;
}
#a-over .box table tr{
border-bottom: 1px solid #5a5a5a;
}
#a-over .box table tr:last-of-type{
border: none;
}
#a-over .box table th{
white-space: nowrap;
background: #cecece;
font-weight: 500;
letter-spacing: 1rem;
}
#a-over .box table td{
text-align: left;
letter-spacing: 0.3rem;
}
#a-over .image{
width: 100%;
max-width: 1300px;
position: absolute;
bottom: -40rem;
left: 0;
}
#a-over .image img{
width: 100%;
}
@media screen and (max-width: 768px) {
#a-over .t-line{height: 50px;}
#a-over .box {margin-top: 1.5rem;}
#a-over .box table th,#a-over .box table td{padding: 1rem 1rem;}
#a-over .box table th{line-height: 120%;letter-spacing: 0rem;}
#a-over .box table td{letter-spacing: 0rem;}
}
@media screen and (max-width: 1200px) {
#a-over .image{bottom: -60%;}
}
@media screen and (max-width: 1000px) {
#a-over{padding-bottom: 17rem;}
#a-over .image{bottom: -45%;}
}
@media screen and (max-width: 768px) {
#a-over{padding: 5rem 0 3rem;}
#a-over .image{position: relative;margin-top: 3rem;}
}


/*Our efforts*/
#i-effort{
position: relative;
background-color: #a6d0df;
background-image: url("/img/i-effort_back.png"),url("/img/i-efforts_b01.png");
background-repeat: repeat,no-repeat;
background-position: center,top 33rem left calc((100% - 1300px)/2 - 5rem);
padding: 23rem 0 0;
z-index: -1;
overflow: hidden;
}
#i-effort .t-line{
height: 140px;
top: 15rem;
left: calc((100% - 1300px)/2 + 27rem);
}
#i-effort .title{
position: absolute;
text-align: left;
top: 30rem;
left: calc((100% - 1300px)/2 + 11rem);
}
#i-effort .image{
width: 1250px;
margin-left: calc((100% - 1300px)/2 + 35rem);
}
#i-effort .image img{
width: 100%;
}
#i-effort .box{
background: url("/img/i-efforts_b03.jpg") no-repeat center / cover;
padding-bottom: 5rem;
vertical-align: top;
}
#i-effort .inner1,#i-effort .inner2{
position: relative;
border: 4px solid #1580ae;
background: #fff;
vertical-align: top;
}
#i-effort .inner1 p,#i-effort .inner2 p{
border: 10px solid #80abc1;
padding: 5rem;
}
#i-effort .inner1{
width: 35%;
display: inline-block;
margin-right: 7%;
margin-top: -30rem;
}
#i-effort .inner2{
width: 55%;
display: inline-block;
margin-top: -15rem;
}
@media screen and (max-width: 1300px) {
#i-effort{background-position: center,top 40rem left -15rem;}
#i-effort .t-line{height: 100px;top: 15rem;left: 21rem;}
#i-effort .title{top: 25rem;left: 4rem;}
}
@media screen and (max-width: 1000px) {
#i-effort{background-position: center,top 1rem left -15rem;padding: 11rem 0 0;}
#i-effort .t-line{height: 80px;top: 8rem;left: 21rem;}
#i-effort .title{top: 16rem;left: 4rem;}
#i-effort .image{width: 900px;margin-left: auto;margin-right: -25rem;}
#i-effort .inner1{margin-top: -15rem;}
#i-effort .inner2{margin-top: -10rem;}
}
@media screen and (max-width: 768px) {
#i-effort{background-position: center,top 1rem left -5rem;background-size: auto,150px;padding: 0;}
#i-effort .t-line{height: 50px;top: 0;left: 13rem;}
#i-effort .title{top: 5rem;left: 4rem;}
#i-effort .image{width: 400px;margin-right: -5rem;margin-top: 1.5rem}
#i-effort .box{
background: url("/img/i-efforts_b03.jpg") no-repeat center / cover;padding:0 1.5rem 5rem;}
#i-effort .inner1 p,#i-effort .inner2 p{border: 10px solid #80abc1;padding: 1.5rem;}
#i-effort .inner1{width: 100%;margin-right: 0;margin-top: -5rem;}
#i-effort .inner1 p{padding: 1.5rem 25%;}
#i-effort .inner2{width: 100%;margin-top: 1.5rem;}
}
@media screen and (max-width: 500px) {
#i-effort{background-position: center,top 1rem left -5rem;background-size: auto,100px;padding: 0;}
#i-effort .t-line{left: 10.5rem;}
#i-effort .title{left: 1.5rem;}
#i-effort .image{width: 300px;margin-right: -9rem;margin-top: 1rem}
#i-effort .box{padding:0 1.5rem 3rem;}
#i-effort .inner1{margin-top: -3rem;}
}

/*group company*/
#i-group{
position: relative;
background: url("/img/i-group_back.jpg") no-repeat center center / cover;
padding: 7rem 0 5rem;
}
#i-group .t-line{
height: 135px;
}
#i-group .box{
background: #fff;
max-width: 615px;
width: 100%;
margin: 0 auto 0;
padding: 9rem 8rem 1.5rem;
border-radius: 5rem;
}
#i-group .box > p{
margin-top: 3rem;
}
#i-group .contents{
padding: 3rem;
margin: 1.5rem calc(50% - 50vw) ;
width: 100vw;
max-width: 100vw;
text-align: center;
}
#i-group ul{
max-width: 1300px;
margin: 0 auto 0;
display: flex;
justify-content: center;
list-style: none;
}
#i-group ul li{
border: 6px solid #00568b;
background: rgba(255, 255, 255, 0.7);
padding: 1.5rem;
width: 17%;
margin-right: 1%;
}
#i-group ul li:last-of-type{
margin-right: 0;
}
#i-group ul li:nth-of-type(2){
border: 6px solid #00803c;
}
#i-group ul li:nth-of-type(3){
border: 6px solid #a9bc23;
}
#i-group ul li:nth-of-type(4){
border: 6px solid #80a8c6;
}
#i-group ul li:nth-of-type(5){
border: 6px solid #32a37b;
}
#i-group ul li h4{
border-bottom: 0.5px solid #000;
padding: 1rem 0 2rem;
margin-bottom: 2rem;
}
#i-group ul li h4 img{
width: 100%;
}
#i-group ul li p{
writing-mode: vertical-rl;
text-orientation: upright;
text-align: left;
margin: auto;
font-family: "Zen Old Mincho", serif;
font-size: 1.9rem;
font-weight: 700;
}
#i-group > img{
display: block;
position: absolute;
bottom: -15px;
left: calc((100% - 1300px)/2 + 21rem);
width: 220px;
}
@media screen and (max-width: 1300px) {
#i-group ul li{width: 19%;margin-right: 1%;}
#i-group > img{left: 10rem;}
}
@media screen and (max-width: 768px) {
#i-group{padding: 2.5rem 1.5rem 5rem;}
#i-group .t-line{height: 50px;}
#i-group .box{padding: 3rem 1.5rem 1.5rem;border-radius: 3rem;}
#i-group .box > p{margin-top: 2rem;}
#i-group .contents{padding: 0;margin: 1.5rem 0;width: 100%;}
#i-group ul{display:block;}
#i-group ul li{padding: 1rem;width: 100%;margin-right: 0;margin-top: 1rem;}
#i-group ul li h4{
width: 100%;
padding: 0.3rem 1.5rem 0;
margin-bottom: 0.5rem;
text-align: center;
}
#i-group ul li h4 img{display: inline-block;
width: 50%;}
#i-group ul li p{
writing-mode: horizontal-tb;
margin: 0.5rem auto 0;
text-align: center;
font-size: 1.6rem;
line-height: 150%;
}
#i-group > img{bottom: -7px;left: 1.5rem;width: 100px;}
}

/*group company*/
#i-sns{
position: relative;
background: #91cfde url("/img/i-effort_back.png") repeat center center;
padding: 7rem 0 9rem;
}
#i-sns .t-line{
height: 70px;
}
#i-sns .title img{
margin-right: 0;
}
#i-sns ul{
margin: 1.5rem auto 0;
display: flex;
justify-content: center;
list-style: none;
}
#i-sns ul li{
display: inline-block;
background: #e8e9e9;
padding: 3rem 1.5rem;
border-bottom: 11px solid #000;
width: 23%;
margin-right: 1%;
}
#i-sns ul li:last-of-type{
margin-right: 0;
}
#i-sns ul li:nth-of-type(1){
border-color: none;
border-image-source: linear-gradient(90deg, rgba(72,69,146,1) 0%, rgba(152,68,145,1) 30%, rgba(199,36,62,1) 60%, rgba(233,147,38,1) 87%, rgba(233,205,38,1) 100%);
border-image-slice: 1;
}
#i-sns ul li:nth-of-type(2){
border-color: #1474dc;
}
#i-sns ul li:nth-of-type(4){
border-color: #ee0000;
}
#i-sns ul li h4{
margin-bottom: 2rem;
padding: 0 3rem;
text-align: center;
}
#i-sns ul li h4 img{
width: 100%;
}
#i-sns blockquote,#i-sns iframe{
width: 100%;
height: 400px;
}
#i-sns .instagram-media{
min-width: 100% !important;
margin: 0 -1px !important;
border-right: none !important;
border-left: none !important;
}
#i-sns .facebook iframe {
width: 100% !important;
}
#i-sns .x{
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 500px;
}
#i-sns .x iframe{
width: 100% !important;
height: 400px!important;
}
#i-sns .youtube {
position: relative;
padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
#i-sns .youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 900px) {
#i-sns{padding: 7rem 0 7rem;}
#i-sns .t-line{height: 50px;}
#i-sns .title{margin-top: -2rem;}
#i-sns ul{flex-wrap: wrap;margin:0;}
#i-sns ul li{
margin: 1.5rem 2% 0 0;
padding: 1.5rem 1.5rem;
border-bottom: 11px solid #000;
width: 47%;
margin-right: 2.5%;
}
#i-sns ul li:nth-of-type(even){margin-right: 0;}
#i-sns ul li h4{padding: 0 1.5rem;}
#i-sns ul li h4 img{max-width: 200px;margin: auto;}
#i-sns blockquote,#i-sns iframe{height: 300px;}
#i-sns .instagram-media{
min-width: 100% !important;
margin: 0 -1px !important;
border-right: none !important;
border-left: none !important;
}
#i-sns .facebook iframe {width: 100% !important;}
#i-sns .x{
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 500px;
}
#i-sns .x iframe{
width: 100% !important;
height: 400px!important;
}
#i-sns .youtube {
position: relative;
padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
#i-sns .youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 500px) {
#i-sns ul li{margin: 1.5rem 1.5rem 0;width: 100%;}
#i-sns ul li:nth-of-type(even){margin: 1.5rem 1.5rem 0;}
#i-sns ul li:nth-of-type(3){width: calc(100% - 3rem);}
#i-sns .x iframe{height: 300px!important;}
}

/*contact*/
#i-contact{
position: relative;
background: url("/img/i-contact_back.jpg") no-repeat center right/ cover;
padding: 7rem 0 5rem;
}
#i-contact .t-line{
height: 110px;
top:-5rem;
}
#i-contact .contents{
max-width: 880px;
display: flex;
justify-content: space-between;
}
#i-contact .box{
margin-top: 5rem;
border: 1px solid #000;
padding: 2rem;
width: 48%;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
letter-spacing: 0.4rem;
text-align: center;
}
#i-contact .box img{
display: inline-block;
vertical-align: middle;
margin-right: 1.5rem;
}
#i-contact .box:nth-of-type(1){
font-size: 3.3rem;
vertical-align: middle;
}
#i-contact .box:nth-of-type(2){
font-size: 2.2rem;
vertical-align: middle;
}
#i-contact .box p{
font-size: 1.6rem;
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 400;
letter-spacing: 0.1rem;
}
#i-contact .box a{
padding-top: 2.5rem;
}
@media screen and (max-width: 768px) {
#i-contact{padding: 5rem 0 3rem;}
#i-contact .t-line{height: 70px;top:-3rem;}
#i-contact .contents{padding: 0 1.5rem;display:block;}
#i-contact .box{
margin: 3rem auto 0;
padding: 1.5rem;
width: 100%;
max-width: 500px;
letter-spacing: 0.4rem;
}
#i-contact .box img{
display: inline-block;
vertical-align: middle;
margin-right: 1.5rem;
}
#i-contact .box:nth-of-type(1){font-size: 2.5rem;}
#i-contact .box:nth-of-type(2){font-size: 1.8rem;vertical-align: middle;margin-top: 1.5rem;}
#i-contact .box p{font-size: 1.4rem;}
#i-contact .box a{padding-top: 0;}
}

/*footer*/
footer{
position: relative;
background: #005a85;
padding: 8.3rem 0 0;
color: #fff;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
letter-spacing: 0.2rem;
}
footer .contents{
position: relative;
padding: 0 1.5rem;
display: flex;
}
footer .box img{
margin-right: 1.5rem;
}
footer .box:nth-of-type(1){
padding-right: 3rem;
width: 8.2rem;
}
footer .box:nth-of-type(2){
margin-right: 3rem;
padding-right: 3rem;
border-right: 1px solid #fff;
}
footer .box:nth-of-type(2) h5{
font-size: 120%;
font-weight: 600;
}
footer .box:nth-of-type(2) p{
margin-top: 3rem;
font-weight: 400;
}
footer .box:nth-of-type(3){
vertical-align: middle;
}
footer .box:nth-of-type(3) a{
display: inline-block;
margin-right: 1.5rem;
letter-spacing: 0.1rem;
}
footer .box:nth-of-type(3) a:hover{
text-decoration: underline;
}
footer .sns{
list-style: none;
position: absolute;
right: 3rem;
bottom: 0;
}
footer .sns li{
display: inline-block;
width: 2.4rem;
}
footer > p{
margin-top: 5rem;
background: #041547;
text-align: center;
font-size: 1.2rem;
font-weight: 300;
padding: 0.5rem;
}
@media screen and (max-width: 768px) {
footer{padding: 3rem 0 0;}
footer .contents{display: block;}
footer .box{text-align: center}
footer .box img{margin-right: 0;}
footer .box:nth-of-type(1){
padding-right: 0;
width: 5rem;
margin: 0 auto;
}
footer .box:nth-of-type(2){
margin: 1.5rem 0 0;
padding: 0;
border-right: none;
}
footer .box:nth-of-type(2) h5{
font-size: 100%;
}
footer .box:nth-of-type(2) p{
margin-top: 1.5rem;
width: 100%;
}
footer .box:nth-of-type(2) a{
display: inline;
}
footer .box:nth-of-type(3){
margin-top: 1.5rem;
}
footer .box:nth-of-type(3) a{
font-size: 1.4rem;
margin-right: 1.5rem;
line-height: 150%;
}
footer .sns{
position: relative;
right:inherit;
text-align: center;
margin-top: 2rem;
}
footer .sns li{
display: inline-block;
width: 2.4rem;
}
footer > p{
margin-top: 3rem;
font-size: 1.2rem;
padding: 0.5rem;
}
}


.sp-show{display: none;}
@media (max-width: 768px) {
.sp-show{display: inline;}
.pc-show{display: none;}
}