@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }
  
/* Global Reset & Standards ---------------------- */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font: size 18px; }
body { font-family: 'IBM Plex Sans JP', "Noto Sans JP", sans-serif; font-size: 100%; line-height:1; color: #333; font-weight: nomal; position: relative; -webkit-font-smoothing: antialiased; background-color: rgba(117, 197, 206, 0.1); }
img { border:0px; max-width: 100%}
figure { margin: 0 }

/* The Grid ---------------------- */
.row { width: 1260px; max-width: 100%; min-width: 601px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -8px; }
.row.collapse .column,
.row.collapse .columns { padding: 0 }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -8px; }
.row .row.collapse { margin: 0 }
.column,
.columns { float: left; min-height: 1px; padding: 0 8px; /* position: relative;*/ }
.column.centered,
.columns.centered { float: none; margin: 0 auto; }
[class*="column"] + [class*="column"]:last-child { float: /*right*/left }
[class*="column"] + [class*="column"].end { float: left }
.one,.row .one { width: 8.33333% }
.two,.row .two { width: 16.66667% }
.threes,.row .threes { width: 20% }
.three,.row .three { width: 25% }
.four,.row .four { width: 33.33333% }
.five,.row .five { width: 41.66667% }
.six,.row .six { width: 50% }
.seven,.row .seven { width: 58.33333% }
.eight,.row .eight { width: 66.66667% }
.nine,.row .nine { width: 75% }
.ten,.row .ten { width: 83.33333% }
.eleven,.row .eleven { width: 91.66667% }
.twelve,.row .twelve { width: 100% }
.row:before,.row:after { content: ""; display: table; }
.row:after { clear: both }
img,object,embed { height: auto }
object,embed { height: 100% }
img { -ms-interpolation-mode: bicubic }


/* google map ---------------------- */
.ggmap { position:relative; margin-top: 30px;/*padding-bottom: 56.25%; padding-top: 30px;*/ height: 224px; overflow: hidden; }
.ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 90%; height: 100%; }


h1,h2,h3,h4,h5,h6,p,a{ font-family: 'IBM Plex Sans JP', 'Zen Maru Gothic', "Noto Sans JP", sans-serif; font-size: 100%; line-height:1; color:#333; font-weight:nomal; position: relative; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { font-size: 18px; font-size: 1.0rem; line-height: 1.59; }
h1 { font-size: 119px; font-size: 6.611rem; line-height: 1; }
h2 { font-size: 52px; font-size: 2.888rem; line-height: 1; }
h3 { font-size: 37px; font-size: 2.055rem; line-height: 1;}
h4 { font-size: 30px; font-size: 1.666rem; line-height: 1;}
h5 { font-size: 21px; font-size: 1.166rem; line-height: 1;}
h6 { font-size: 16px; font-size: 0.888rem; line-height: 1;}
.kome { font-size: 13px; font-size: 0.72rem; line-height: 1; }
.strong,b { font-weight: bold; line-height: 1.444; }

hr { clear: both; /*margin: 8px 0 8px; height: 0;*/ }

/*
.mb10{ margin-bottom:10px;}
.mb18{ margin-bottom:18px;}
.mb26{ margin-bottom:26px;}
.mb51{ margin-bottom:51px;}
.mb63{ margin-bottom: 63px;}
.mb72{ margin-bottom:72px;}
.mb144{ margin-bottom:144px;}
*/
.mb0{ margin-bottom:0px;}
.mb18{ margin-bottom:18px;}
.mb20{ margin-bottom: 20px;}
.mb36{ margin-bottom:36px;}
.mb95{ margin-bottom:95px;}
.mb120{ margin-bottom: 120px;}

.tar { text-align:right;}
.tac { text-align: center;}
.tal { text-align: left;}

i { margin-right:1.5%; }
.pdl36 { padding-left:36px; }
.pdr36 { padding-right:36px; }
.mgr10 {margin-right: 10px;}

.noleftmargin { margin-left: 0px; padding-left: 0px;}
.nomargin { margin: 0px; padding: 0px;}
.norightmargin { margin-right: 0px; padding-right: 0px;}

#page-top { font-size:100%; position: fixed; bottom: 20px; right: 20px; margin-bottom:5px;}
#page-top a { color: #75C5CE; background: #fff; text-decoration: none; padding: 11px 15px; text-align: center; display: block; border-radius: 50px; border: #75C5CE 1px solid;}
#page-top a:hover {text-decoration: none; opacity:0.6;}

.onlymobile { display:none; }

ul { list-style:none; }
a { text-decoration: none; }

.copyright { background-color: #5DC1CF; }
.copyright p{ font-size:18px; padding:6px; text-align:center; color: #fff}


/* CONTENT ---------------------- 
.loading { width: 100%; height: 100%;background: rgba(255,255,255,1.0); position: fixed; top: 0; left: 0; z-index: 20000;}
.loading img { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; }
*/
header h1 { font-size: 90%; height: 80%; }
/*header img { height: 80%;}*/
header .header-pc {position: fixed; height: 80px; width:100%; z-index: 999; display: flex; justify-content: space-between; align-items: center; color:#333; text-align: center; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5); }
header .form-box { width: 16%; height: 100px; padding-right: 0%; }
header a.button { color: #fff; background: #75C5CE; text-decoration: none; padding: 35px 20px; text-align: center; display: block; font-size: 19px; font-size: 1.0rem;}
/* お問い合わせボタン button */ /* キラッと光る*/
.btnshine{ position: relative; outline: none; overflow: hidden;}
.btnshine::before { content: '';
	position: absolute; top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
	transform: skewX(-25deg);}
.btnshine:hover::before {animation: shine 0.9s;}
@keyframes shine { 100% {left: 125%;} }


nav { background-color: #fff; }
nav h1 { font-size: 0px;}
nav ul { font-size:0; display: flex; justify-content: space-around;}
nav ul li { display:inline-block; padding:26px 0px; vertical-align: middle; }
nav ul li:last-child { padding-right:0px; border-right:none; }
nav ul li a{ display:block; text-align:center;  font-size:24px; font-size:1.333rem; line-height:1.2; font-weight: 500; letter-spacing: 0.1em; transition:all .8s; -webkit-transition:all .8s;}
nav ul li a span { color: #0167A3; font-family: 'Libre Baskerville', serif; font-size: 18px; font-size: 1.0rem; font-weight: bold; line-height:1; }
nav ul li:hover{ background-color:rgb(255,255,255,0.5); }
.icon-size {font-size: 50px;}
/*.menu-logo {margin-right: 5%;}
.menu-logo:hover { background-color: #FFF9AA; }*/


/* SP nav ---- */

/* top movie SP ----- */
.video-container video {width: 100%; height: 80%; }
/* top movie PC ----- */
.bg-move { background-color: #fff;}
/*header設定*/
.header-pc-top{position: relative; height: 100vh;/*高さを全画面にあわせる*/} 
.header-pc-sub{position: relative; height: 75px;/*サブページ高さを全画面にあわせない*/} 
#video-area{position: fixed; z-index: -1; top: 0; right:0; left:0; bottom:0; overflow: hidden;}
#video {/*天地中央配置*/ position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */ height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */ min-height: 100%; min-width: 100%;}

.size { font-size: 20px; }
section { padding: 95px 0px;}

/* TOP PAGE ---------------------------------- */
.title {text-align: center; margin-bottom: 60px; }
.title h2 { font-size: 52px; font-size: 2.888rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.08em; margin-bottom: 15px;}
.title h4 { font-size: 25px; font-size: 1.388rem; line-height: 1.0; letter-spacing: 0.1em; color: #0167A3; font-family: 'Libre Baskerville', serif; font-weight: bold; font-style: italic;}

#top-main { text-align: center;}
#top-main .main-box { background-image: url(../img/top/001.png); background-repeat: no-repeat; text-align: right; height: 490px; display: flex; align-items: flex-end; margin-bottom: 95px;}
#top-main .white-box {background-image: url(../img/top/002.png); background-repeat: no-repeat; background-size: cover; /*padding: 51px 51px 46px 85px;*/ padding: 5% 5% 5% 7%; margin-left: 49.5%; margin-top: 63px; height: 427px; width: 48%;}
#top-main .white-innerbox h3 { color: #75C5CE; font-size: 28px; font-size: 1.555rem; font-weight: bold; text-shadow: 0.1px 0.5px 1px #7B7878; }
#top-main .white-innerbox h4 { color: #707070; font-size: 34px; font-size: 1.888rem; line-height: 1.44; letter-spacing: 0.1em; font-weight: bold; margin: 18px auto; }
#top-main .white-innerbox p { color: #216178; font-size: 21px; font-size: 1.166rem; line-height: 1.5; font-weight: 500; margin-bottom: 28px; }
#top-main .white-innerbox { text-align: left; }
#top-main .white-innerbox a {width: 38%;}
#top-main .white-innerbox a span { font-size: 18px; font-size: 1.0rem; letter-spacing: 0.1em;}
#top-main .main-box2 { background-image: url(../img/top/003.png); background-repeat: no-repeat; text-align: right; height: 490px; display: flex; align-items: flex-end; margin-bottom: 95px;}
#top-main .main-box3 { background-image: url(../img/top/005.png); background-repeat: no-repeat; text-align: right; height: 490px; display: flex; align-items: flex-end; margin-bottom: 95px;}
#top-main .white-box2 {background-image: url(../img/top/004.png); background-repeat: no-repeat; background-size: cover; /*padding: 51px 51px 46px 85px;*/ padding: 5% 5% 5% 7%; margin-right: 49%; margin-left: 0.5%; margin-top: 63px; height: 427px; width: 48%;}

#top-about img { margin-bottom: 10px; }
#top-about h3 { font-size: 18px; font-size: 1.0rem; font-weight: bold; }

#info {background-image: url(../img/bg-contact.png); background-repeat: no-repeat; background-size: cover;}
#info p { font-size: 28px; font-size: 1.555rem; line-height: 1.59; font-weight: 500; margin-bottom: 68px; }
#info img { margin-bottom: 15px; }


footer { padding:25px 0px; background-color: rgba(255, 255, 255, 0.5); }
#outline h2 { margin-bottom: 10px;}
#outline h4 { font-size: 25px; font-size: 1.388rem; font-weight: bold; line-height: 1.59; margin-bottom: 10px;}
#outline p { font-size: 18px; font-size: 1.125rem; line-height: 1.5;}
#outline a { color: #4A4A4A;}
#outline .pdl25 {padding-left: 3%;}
#outline p.ppolicy { text-decoration: underline; margin-top: 3%;} 

.line { width: 50%; border-bottom: 2px solid #5DC1CF; margin: 0 auto;}
footer a:hover { text-decoration: underline;}


/*== top-mainボタン == 矢印の線がループして伸縮 */
.btnlinestretches5{ position:relative; color:#707070; padding: 18px 0; display:inline-block; text-decoration: none; outline: none; }
.btnlinestretches5::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 0.5px; background: #707070;} /*線の形状*/
.btnlinestretches5::after { content: ""; position: absolute; bottom:-4px; width: 8px; height: 8px; border-top: 1px solid #707070; border-right: 1px solid #707070; transform: rotate(45deg);}/*矢印の形状*/
.btnlinestretches5::before {animation: arrowlong01 2s ease infinite;}
.btnlinestretches5::after {animation: arrowlong02 2s ease infinite;}
@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}
@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}

/*== 少し出ていた線が伸びる オレンジ */
.btnlinestretches2{position:relative; color:#333; padding: 15px 30px; display:inline-block; text-decoration: none; outline: none; background-color: #fff; width: 80%; background-image: url(../img/c001.png); background-repeat: no-repeat;}
.btnlinestretches2::before, .btnlinestretches2::after { content:''; position:absolute; border:solid #FCA14E; width:10px; height:10px; transition:all 0.3s ease-in-out; }
.btnlinestretches2::before{ top:0; left:0; border-width:2px 0 0 2px; }
.btnlinestretches2::after{ bottom:0; right:0; border-width:0 2px 2px 0; }
.btnlinestretches2:hover::before, .btnlinestretches2:hover::after{ width:calc(100% - 2px); height:calc(100% - 2px); border-color:#FCA14E; }

/*== 少し出ていた線が伸びる ブルー */
.btnlinestretches2-b {position:relative; color:#333; padding: 15px 30px; display:inline-block; text-decoration: none; outline: none; background-color: #fff; width: 80%; background-image: url(../img/c003.png); background-repeat: no-repeat;}
.btnlinestretches2-b::before, .btnlinestretches2-b::after { content:''; position:absolute; border:solid #5DC1CF; width:10px; height:10px; transition:all 0.3s ease-in-out; }
.btnlinestretches2-b::before{ top:0; left:0; border-width:2px 0 0 2px; }
.btnlinestretches2-b::after{ bottom:0; right:0; border-width:0 2px 2px 0; }
.btnlinestretches2-b:hover::before, .btnlinestretches2-b:hover::after{ width:calc(100% - 2px); height:calc(100% - 2px); border-color:#5DC1CF; }

/*== 少し出ていた線が伸びる グリーン */
.btnlinestretches2-g {position:relative; color:#333; padding: 15px 30px; display:inline-block; text-decoration: none; outline: none; background-color: #fff; width: 80%; background-image: url(../img/c006.png); background-repeat: no-repeat;}
.btnlinestretches2-g::before, .btnlinestretches2-g::after { content:''; position:absolute; border:solid #06C755; width:10px; height:10px; transition:all 0.3s ease-in-out; }
.btnlinestretches2-g::before{ top:0; left:0; border-width:2px 0 0 2px; }
.btnlinestretches2-g::after{ bottom:0; right:0; border-width:0 2px 2px 0; }
.btnlinestretches2-g:hover::before, .btnlinestretches2-g:hover::after{ width:calc(100% - 2px); height:calc(100% - 2px); border-color:#06C755; }


/*== 会社概要ボタン == 線の上を別の線が伸びる */
.btnlinestretches4{ position:relative; color:#B8B8B8; padding: 10px 50px 10px 10px; display:inline-block; text-decoration: none; outline: none; }
.btnlinestretches4::before,.btnlinestretches4::after{ content:''; position:absolute; z-index:1; bottom:0; left:0; background:#B8B8B8; width:100%; height:1px; transition:all 0.3s ease-in-out; }
.btnlinestretches4::after{ width:0; background:#707070; }/*hover時に伸びる線の形状*/  
.btnlinestretches4:hover::after { width:100%; } /*hover時に100%に伸びる*/    
.btnlinestretches4 span::after { content: ''; position: absolute; top: 0.9em; right: 20px; width: 5px; height: 5px; border-top: 1px solid #B8B8B8; border-right: 1px solid #B8B8B8; transform: rotate(45deg); transition: all .3s; }
.btnlinestretches4:hover span::after { right:15px; }
.btnarrow4{ position: relative; display: inline-block;/*padding: 0 20px;*/color: #B8B8B8; text-decoration: none; outline: none; }
.btnarrow4::before{ content: ''; position: absolute; bottom:-8px; left:15%; width: 85%; height: 1px; background:#B8B8B8; transition: all .3s; }
.btnarrow4::after{ content: ''; position: absolute; bottom:-3px; right:0;  width: 15px; height:1px; background:#B8B8B8; transform: rotate(35deg); transition: all .3s; }
.btnarrow4:hover::before{ left:20%; }
.btnarrow4:hover::after{ right:-5%; }

/* == SP mainボタン == */
.btn03{position: relative; text-decoration: none; display: inline-block; text-align: center; background: transparent; border-radius: 25px; border: solid 1px #0167A3; outline: none; transition: all 0.2s ease;}
.btn03:hover{ border-color:transparent; }
.btn03 span { position: relative; z-index: 2; display: block; padding: 10px 30px; background:#fff; border-radius: 25px; color:#0167A3; transition: all 0.3s ease;}
.pushright:before { content: ""; position: absolute; z-index: -1; top: 4px; left: 4px; width: 100%; height: 100%; border-radius: 25px; background-color: #0167A3;}
.pushright:hover span {background-color: #0167A3; color: #fff; transform: translate(4px, 4px);}

/* == skill  画像の縮小 == */
.zoomOut img{ transform: scale(1.1); transition: .3s ease-in-out; }
.zoomOut a:hover img{ transform: scale(1); }
.mask{ display: block; line-height: 0; overflow: hidden;}

/* == about ぼかす　*/
.blur img{filter: blur(0); transition: .3s ease-in-out;}
.blur a:hover img{filter: blur(3px);}
/*　画像のマスク　*/
.mask{display: block; line-height: 0; overflow: hidden;}

/*
#top-news table { border-collapse: collapse; width: 90%; border-top: 1px solid #5C1C03; margin: 0 auto; font-size: 28px; font-size: 1.555rem; }
#top-news table tr { border-bottom: 1px solid #5C1C03; color: #5C1C03; font-weight: bold;}
#top-news table th { padding: 14px; font-weight:bold; vertical-align:middle; color: #5C1C03; letter-spacing: 0.1em; text-align: right;}
#top-news table td { padding: 14px 28px; line-height:1.444; }
#top-news table td.category { padding: 14px; text-align: center; letter-spacing: 0.1em; color: #D0AA79; font-family: 'Marcellus'; vertical-align: middle; }
#top-news a.btn { width: 440px; padding: 15px 50px; border: 1px solid #D0AA79; background-color: rgba(255, 255, 255, 0.5); margin-top: 60px; display: inline-block; transition: ease .2s;}
#top-menu ul.menu-box {display: flex; flex-wrap: wrap; margin: 0 10% 95px; }
#top-menu .menu-box li { width: calc(100%/3);}
#top-menu .menu-box li { margin-bottom: 16px;}
#top-lesson p { font-size: 28px; font-size: 1.555rem; font-weight: bold; line-height: 1.8; text-align: center; margin-bottom: 35px;}
#top-lesson h3 {font-size: 30px; font-weight: bold; font-size: 1.666rem; line-height: 1.8; letter-spacing: 0.05em; padding-bottom: 30px;}
#top-lesson .course {background-color: #fff; padding: 30px;}
#top-lesson ul { margin-bottom: 20px; }
#top-lesson ul li {color: #5C1C03; font-size: 25px; font-size: 1.388rem; line-height: 1.5; letter-spacing: 0.05em;}
#top-lesson .lesson-flex { display: flex; align-items:stretch; justify-content: center;}
#top-lesson .lesson-flexbox {background-color: #fff; width: 45%; margin: 2%;}
#top-lesson a.btn { width: 60%; padding: 15px 50px; border: 1px solid #D0AA79; background-color: rgba(255, 255, 255, 0.5); display: inline-block; transition: ease .2s; margin: 20px; font-family: 'Marcellus'; font-size: 20px; font-size: 1.111rem; font-weight: bold; letter-spacing: 0.1em;}
#greeting .g-side { padding: 0px 3%; }
#greeting .g-title h2 { font-size: 52px; font-size: 2.888rem; font-weight: bold; letter-spacing: 0.08em; padding-bottom: 30px;}
#greeting .g-span { font-size: 28px; font-size: 1.555rem; font-weight: bold; line-height: 1.0; letter-spacing: 0.1em; color: #0ABAB5; font-family: 'Marcellus'; vertical-align: baseline; margin-left: 30px; }
#greeting .underline { position: relative; display: inline-block; }
#greeting .underline:before { content: ''; position: absolute; left: 25%; bottom: 0%;display: inline-block; width: 150px; height: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%);background-color: #D0AA79; border-radius: 1.5px;}
#greeting h3 { font-size: 37px; font-size: 2.25rem; font-weight: bold; line-height: 1.5; letter-spacing: 0.05rem; margin: 63px 0px; }
#greeting p { font-size: 28px; font-size: 1.555rem; font-weight: bold; line-height: 1.59; letter-spacing: 0.1em; }
#greeting .g-img {text-align: center; margin: 60px auto 80px;}
#greeting .bg-blue img { width: 100%; margin-top: 60px; margin-bottom: 85px;} 
*/



/* SUB PAGE ---------------------------------- */
#subpage { padding: 0px; }
#subpage .sub-title {}
#subpage .sub-title h2 { height: 460px; width: 10%; display: table-cell; vertical-align: middle; color: #fff; font-size: 52px; font-size: 2.888rem; font-weight: bold; letter-spacing: 0.1em; text-shadow: 1px 1px 1px #333; padding-top: 80px;}

/*
.title-sub {text-align: center; margin-bottom: 60px; }
.title-sub h2 { font-size: 52px; font-size: 2.888rem; font-weight: bold; line-height: 1.0; letter-spacing: 0.08em; margin-bottom: 15px;}
.title-sub h4 { font-size: 25px; font-size: 1.388rem; font-weight: bold; line-height: 1.0; letter-spacing: 0.1em; color: #5DC1CF; font-family: 'Marcellus'; }
*/

/* WORKS --- */
.works-top-bg {background-image: url(../img/works/title-works.png); width: 100%; height: 460px; background-size: cover;}
#works {padding-bottom: 120px;}
#works table { border-collapse: collapse; width: 85%; margin: 0 auto; font-size: 24px; font-size: 1.333rem; table-layout: fixed; margin-bottom: 63px;}
#works table tr { border: 0.8px solid #707070; }
#works table th { padding: 26px 10px 20px; width: 30%; color: #fff; text-align: center; vertical-align: middle; background-color: #75C5CE; font-weight: bold;}
#works td { padding: 25px; line-height: 1.2; vertical-align: middle;}

/* SKILL UP --- */
.skill-top-bg {background-image: url(../img/skill/title-skill.png); width: 100%; height: 460px; background-size: cover;}
#skill .title { margin-bottom: 120px;}
#skill .skill-contents { width: 90%; margin: 0 auto; padding-bottom: 60px;}
#skill .skill-contents h3 { padding: 15px 0px 30px; width: 100%; }
#skill .skill-contents p { margin: 55px auto 120px; font-size: 22px; font-size: 1.222rem;  line-height: 1.4; text-align: left;}
#skill .underline { position: relative; display: inline-block; }
#skill .underline:before { content: ''; position: absolute; left: 19%; bottom: 0%;/*線の上下位置*/ display: inline-block; width: 150px; height: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%);/*位置調整*/ background-color: #75C5CE; border-radius: 1.5px;}
#skill .underline2 { position: relative; display: inline-block; }
#skill .underline2:before { content: ''; position: absolute; left: 55%; bottom: 0%;/*線の上下位置*/ display: inline-block; width: 150px; height: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%);/*位置調整*/ background-color: #75C5CE; border-radius: 1.5px;}
#skill .underline3 { position: relative; display: inline-block; }
#skill .underline3:before { content: ''; position: absolute; left: 45%; bottom: 0%;/*線の上下位置*/ display: inline-block; width: 150px; height: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%);/*位置調整*/ background-color: #75C5CE; border-radius: 1.5px;}
#skill .skill-img { margin: 55px auto 120px; }

/* ABOUT --- */
#factory { padding: 30px 0px 170px;}
#factory .title h4 { font-family: 'IBM Plex Sans JP', sans-serif; font-style: normal;}
.factory-title { text-align: center; }
#factory .factory-title img {width: 70%;}
#factory .bg-factory { background-image: url(../img/about/bg-factory.png); background-repeat: no-repeat; background-size: cover;}
#factory .bg-factory h3 { color: #fff; font-size: 48px; font-size: 2.666rem; font-weight: bold; text-shadow: 2px 2px 2px #000;}
#factory .bg-factory p { color: #fff; font-size: 28px; font-size: 1.555rem;  text-shadow: 2px 2px 2px #000;}
#factory ul { display: flex; justify-content: center; align-items: center; }
#factory .seizou:hover { background-color: rgba(0, 0, 0, .5); }
#factory ul li { vertical-align: middle; margin: 35px 0px;}
#factory ul li.f01 { width: 18%; }
#factory ul li.f02 { width: 25%; }
#factory ul li.f03 { width: 55%; }
#office { padding: 30px 0px 170px;}
#office .title h4 { font-family: 'IBM Plex Sans JP', sans-serif; font-style: normal;}
#office .office-title img {width: 70%;}
#office ul li { width: 30%; display: inline-block; margin: 0 1.5%;}
#office .office-bg { position: relative; width: 100%; text-align: center;}
#office .office-bg h3 { position: absolute; color: #fff; font-size: 35px; font-size: 1.944rem; font-weight: bold; line-height: 1.2; text-shadow: 2px 2px 5px #000; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center;}
#office .office-bg img { width: 100%;}
#office p { font-size: 28px; font-size: 1.555rem; font-weight: bold; text-align: center; margin-top: 40px;}
#about { padding: 30px 0px 170px;}
#about .about-title img {width: 85%;}
#about table { border-collapse: collapse; width: 85%; margin: 0 auto; font-size: 24px; font-size: 1.333rem; table-layout: fixed; margin-bottom: 63px;}
#about table tr { border-bottom: 0.8px solid #0167A3; border-top: 0.8px solid #0167A3; }
#about table th { padding: 26px 10px 20px; width: 30%; color: #333; text-align: center; vertical-align: middle; background-color: #75C5CE; font-weight: bold;}
#about td { padding: 25px; line-height: 1.2; vertical-align: middle; background-color: #fff;}
#about a.kyoutei { /*text-decoration: underline;*/ } 
#about a.kyoutei:hover { color: #0167A3; font-weight: bold; } 


/* CONTACT--- */
.contact-top-bg {background-image: url(../img/contact/title-contact.png); width: 100%; height: 460px; background-size: cover;}
#contact { padding: 120px 0px 180px;}
#contact h3 { font-size: 32px; font-size: 1.777rem; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 30px;}
#contact p {font-size: 28px; font-size: 1.555rem; font-weight: bold; line-height: 1.8; text-align: center; margin: 58px auto 80px;}
#contact .contact-tell-box { width: 80%; background-color: #fff; background-image: url(../img/contact/001.png); background-repeat: no-repeat; border: 2px solid #0167A3; padding: 80px 0px; margin: 0 auto 80px;}
#contact .contact-tell-box a img { width: 8%; margin-right: 30px; vertical-align: middle;}
#contact .contact-tell-box a span { font-size: 52px; font-size: 2.888rem; font-weight: bold; font-family: 'Marcellus', serif; letter-spacing: 0.1em; vertical-align: middle;}
#contact .contact-tell-box a:hover {text-decoration: none; opacity:0.6; }
#contact .contact-line-box { width: 80%; background-color: #fff; background-image: url(../img/contact/005.png); background-repeat: no-repeat; border: 2px solid #06C755; padding: 80px 0px; margin: 0 auto 80px; display: flex; justify-content: center; align-items: center;}
#contact .cline-box {display: inline-block; justify-content: center; align-items: center;}
#contact .cline-box img { margin: 0% 15%;}
#contact .cline-box2 { display: inline-block;}
#contact .cline-box2 img { margin: 0 10px 0 0;}
#contact .cline-box2 p { font-size: 24px; font-size: 1.333rem; font-weight: 400; line-height: 1.59; text-align: left; margin: 0px;}
#contact .container { display: flex; justify-content: center; align-items: center;}

#contact .contact-form-box { width: 80%; background-color: #fff; background-image: url(../img/contact/003.png); background-repeat: no-repeat; border: 2px solid #75C5CE; padding: 80px 0px; margin: 0 auto;}
#contact .c-box img { width: 90px; }
#contact .c-box p {font-size: 24px; font-size: 1.333rem; font-weight: 400; line-height: 1.59; text-align: left; width: 70%;}
#contact table { border-collapse: collapse; width: 85%; margin: 0 auto; font-size: 24px; font-size: 1.333rem; color: #707070; table-layout: fixed;}
#contact table tr { border-bottom: 1px dotted #707070; }
#contact table tr.w-border { border-bottom: 1px dotted #fff; }
#contact table th { padding: 26px 10px 20px; width: 30%; color: #333; text-align: left; vertical-align: middle;}
#contact table th span.small { font-size: 18px; font-size: 1.0rem;}
#contact table td { padding: 25px; }
#contact table td.red { padding: 15px 0px; width: 10%;}
#contact table td.red span{ color: #fff; font-size: 18px; font-size: 1.0rem; text-align: center; background-color: #CF5D5D; border-radius: 10px; padding: 5px 10px; vertical-align:middle;}
#contact table td span { font-size: 20px; font-size: 1.11rem; margin-bottom: 3px; }
#contact table input[type="text"] { width: 90%; height: 44px;}
#contact table input[type="submit"] { color:#fff; font-weight: bold; padding:12px 80px; font-size: 21px;  font-size: 1.31rem; line-height: 1.59; background-color: #5DC1CF; border: none; letter-spacing: 0.1em;}
form input[type="submit"] { color:#fff; font-weight: bold; padding:12px 80px; font-size: 21px;  font-size: 1.31rem; line-height: 1.59; background-color: #5DC1CF; border: none; letter-spacing: 0.1em;}
#contact table input[type="submit"]:hover{  }
#contact table textarea { width: 90%; }
#contact .entry-box { width: 65%; text-align: center; margin: 0 auto;}
#contact a.button {color: #fff; background: #75C5CE;
    text-decoration: none;
    padding: 35px 20px;
    text-align: center;
    display: block;
    font-size: 24px;
    font-size: 1.333rem; border-radius: 50px;}

/* privacy--- */
#privacy { padding: 10% 15%;}
#privacy h3 { font-size: 18px; font-size: 1.0rem; font-weight: bold; line-height: 1.59; margin-bottom: 10px;}
#privacy .policy { margin-bottom: 36px;}
#privacy .policy ul { padding-left: 3%; font-size: 18px; font-size: 1.0rem; line-height: 1.4;}


/*---------------------- */


/*---------------------- */

/* 画面読み込みで下から　fadeUp */
.fadeUp{ animation-name:fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
	from { opacity: 0; transform: translateY(100px);}
	to {opacity: 1; transform: translateY(0);}
}

/* スクロールで下から　fadeUp */
.fadeUp{ animation-name:fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
	from {opacity: 0; transform: translateY(100px); }
	to {opacity: 1; transform: translateY(0);}
}
.fadeUpTrigger{opacity: 0;}/* スクロールをしたら出現する要素にはじめに透過0を指定　*/




/* Responsive ---------------------- */
@media only screen and (max-width: 1024px) {
	header .form-box { width: 20%; }
	nav ul li {  }
	.onlypc1024 { display: none;}
	
	#top-main .white-box { margin-left: 40%; width: 58%;}
	#top-main .white-box2 {margin-right: 40%; margin-left: 1%; width: 58%;}

	#office ul li { width: 31%; margin: 0 1%;}
	#office .office-bg h3 { font-size: 28px; font-size: 1.555rem; }
	#office p { font-size: 23px; font-size: 1.277rem; }


}
@media only screen and (max-width: 768px) {
	.row { width: 96%;}
	.onlymobile { display: inherit;}
	.onlypc { display: none;}
	
	#top-main .white-box { margin-left: 32%; width: 65%; margin-top: 30px; }
	#top-main .white-box2 {margin-right: 28%; margin-left: 1%; width: 70%;}
	#top-main .white-innerbox h4 {font-size: 32px; font-size: 1.777rem; line-height: 1.2; letter-spacing: 0em; }

}

@media only screen and (max-width: 540px) {
	html { font-size:14px }
	body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	.row { width: 100%; max-width: 100%; min-width: 1px; margin: 0 auto; } 
	.column, .columns { width: auto !important; float: none; }
	.column:last-child, .columns:last-child { float: none }
	[class*="column"] + [class*="column"]:last-child { float: none }
	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both }
	.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten { margin-left: 0 !important }
	.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto }
	.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto }
	/* Mobile 4-column Grid */
	.row .mobile-one { width: 25% !important; float: left; padding: 0 5px; }
	.row .mobile-one:last-child { float: right }
	.row .mobile-one.end { float: left }
	.row.collapse .mobile-one { padding: 0 }
	.row .mobile-two { width: 50% !important; float: left; /*padding: 0 5px;*/ padding: 0 10px 0px 0px; margin-bottom:10px;}
	.row .mobile-two:last-child {  float: /*right*/left }
	.row .mobile-two.end { float: left }
	.row.collapse .mobile-two { padding: 0 }
	.row .mobile-three { width: 75% !important; float: left; padding: 0 15px; }
	.row .mobile-three:last-child { float: right }
	.row .mobile-three.end { float: left }
	.row.collapse .mobile-three { padding: 0 }
	.row .mobile-four { width: 100% !important; float: left; padding: 0 15px; }
	.row .mobile-four:last-child { float: right }
	.row .mobile-four.end { float: left }
	.row.collapse .mobile-four { padding: 0 }
	.noleftmarg {padding:0px !important;}

	
	.mobile70 { width: 55% !important; float: left; padding: 0 5px; }
	.mobile30 { width: 38% !important; float: left; padding: 0 5px; }
	.m-tac { text-align: center;}

	
	.noleftmargin { margin: 0px; padding: 0px;}
	.nomargin { margin: 0px; padding: 0px;}
	.norightmargin { margin: 0px; padding: 0px;}

	.onlymobile { display: inherit;}
	.onlypc { display: none;}
	
	/*
	header img { width: 70%;}
	header ul{ margin-top: 18px}*/

	header { padding: 10px 0px; background-color: #fff;}
	header h1 { width: 80%; }

	.openbtn{ top:0px; right: 0px; }

	header .sub-title img { /*width: 60%;*/}
	.subpage-top-bg {background-image: url(../img/sub-main-sp.png); height: 240px; }
	.sub-title h2 { height: 240px; display: table-cell; vertical-align: middle; }

	
	.size { font-size: 15px;}
	.icon a { font-size: 18px; margin-left: 8px;}
	.icon-size {font-size: 16px; margin-left: 3px;}
	nav { text-align: center; background: #75C5CE; }
	nav ul { display: block;}
	nav ul li { display:block; width: 100%; margin-left:0px; padding: 0px; /*margin: 15% auto;*/ }
	nav ul li.insta { width: 100%; padding: 0px; margin-left: 2%; }
	nav ul li.insta a {letter-spacing: 0em;}
	nav ul li a{ font-size: 21px; font-size: 1.166rem; line-height:1.2; }

	section { padding: 45px 0px; } 

	.title { margin-bottom: 45px; }
	.title h2 { font-size: 30px; font-size: 1.666rem; margin-bottom: 10px;}
	.title h4 { font-size: 22px; font-size: 1.222rem;  letter-spacing: 0em; }
	p span.sp { display: inline-block;}

	#top-main-sp {}
	#top-main-sp .main-box { background-image: url(../img/top/sp001.png); background-repeat: no-repeat; text-align: right; background-size: cover; height: 222px; display: flex; align-items: flex-end; margin-bottom: 10px;}
	#top-main-sp .white-box {background-image: url(../img/top/sp007.png); background-repeat: no-repeat; background-size: cover; /*padding: 51px 51px 46px 85px;*/ padding: 8% 0% 5% 10%; margin-left: 20%; /*height: 125px;*/ width: 80%;}
	#top-main-sp .white-innerbox { text-align: left;}
	#top-main-sp .white-innerbox h3 { color: #216178; font-size: 21px; font-size: 1.166rem; font-weight: bold; text-shadow: 0.1px 0.5px 2px #75C5CE; }
	#top-main-sp .white-innerbox h4 { color: #707070; font-size: 22px; font-size: 1.222rem; line-height: 1.27; letter-spacing: 0em; font-weight: bold; margin: 15px auto 18px; }
	#top-main-sp .white-outbox p { color: #216178; font-size: 18px; font-size: 1.0rem; line-height: 1.59; font-weight: 500; margin-bottom: 18px; margin-top: 18px; text-align: left; padding: 0% 1%; }
	#top-main-sp .white-outbox { text-align: center; margin-bottom: 68px;}
	#top-main-sp .main-box2 { background-image: url(../img/top/sp002.png); background-repeat: no-repeat; text-align: right; background-size: cover; height: 222px; display: flex; align-items: flex-end; margin-bottom: 10px;}
	#top-main-sp .main-box3 { background-image: url(../img/top/sp003.png); background-repeat: no-repeat; text-align: right; background-size: cover; height: 222px; display: flex; align-items: flex-end; margin-bottom: 10px;}
	#top-main-sp .white-box2 {background-image: url(../img/top/sp007.png); background-repeat: no-repeat; background-size: cover; /*padding: 51px 51px 46px 85px;*/ padding: 8% 0% 5% 7%; margin-right: 20%; margin-left: 0.5%; /*height: 125px;*/ width: 80%;}

	#otomodachi {padding-top: 0px;}

	#top-about img { width: 100%; margin-bottom: 0px;}
	#top-about p { font-size: 16px; font-size: 0.888rem; font-weight: bold; line-height: 1.8; margin: 0px auto; }
	.btnlinestretches4::before,.btnlinestretches4::after{ height:0px;}


	#info {background-image: url(../img/sp-bg-contact.png);}
	#info p { font-size: 18px; font-size: 1.0rem; letter-spacing: 0em; margin-bottom: 42px; }
	#info h5 { font-size: 16px; font-size: 0.888rem;}
	.btnlinestretches2{ padding: 15px; width: 80%; background-image: none; }
	.btnlinestretches2-b {padding: 15px; background-image: none; }
	.btnlinestretches2-g {padding: 15px; background-image: none; }
	#outline img { width: 100%;}
	#outline h2 { margin-bottom: 10px;}
	#outline h4 { font-size: 20px; font-size: 1.111rem; font-weight: bold; line-height: 1.59; margin-bottom: 0px;}
	#outline p { font-size: 18px; font-size: 1.0rem; line-height: 1.3;}
	footer p {letter-spacing: 0em; margin-top: 5px; margin-bottom: 25px;}
	.ggmap { margin: 0px auto; text-align: center;}

	.copyright p{ font-size:12px; padding:2px;}

	/* sab page */
	#subpage .sub-title h2 {font-size: 40px; font-size: 2.222rem; line-height: 1; font-weight: bold; letter-spacing: 0em; padding-top: 40px;}

	.title-sub { margin-bottom: 45px; }
	.title-sub h2 { font-size: 32px; font-size: 1.777rem; margin-bottom: 10px;}

	.works-top-bg {background-image: url(../img/works/sp-title-works.png);}
	#works {padding-bottom: 63px;}
	#works table { width: 90%; font-size: 16px; font-size: 0.888rem; margin-bottom: 32px;}
	#works table th { padding: 14px 1px 14px; width: 32%; font-weight: bold;}
	#works td { padding: 14px 8px 14px 14px; line-height: 1.1;}

	.skill-top-bg {background-image: url(../img/skill/sp-title-skill.png);}
	#skill .title { margin-bottom: 45px;}
	#skill .skill-contents h3 { padding: 15px 0px; font-size: 30px; font-size: 1.666rem; }
	#skill .underline:before { left: 27%; }
	#skill .underline2:before { left: 50%; width: 100px; }
	#skill .underline3:before { left: 40%; width: 100px; }
	#skill .skill-contents p { margin: 30px auto 0px; font-size: 16px; font-size: 0.888rem;}
	#skill .skill-img { margin: 30px auto 0px; }

	#factory { padding-bottom: 80px;}
	#factory .title h2 { font-size: 28px; font-size: 1.555rem; letter-spacing: 0em;}
	#factory .factory-title img {width: 100%;}
	#factory .bg-factory { background-image: url(../img/about/sp-bg-factory.png); background-repeat: no-repeat; background-size: cover;}
	#factory .f-m img { width: 100%; margin: 20px 0px;}
	#office { padding-bottom: 80px;}
	#office .office-title img {width: 100%;}
	#office ul { display: flex; justify-content: center; align-items: center; }
	#office ul li { width: 47%; }
	#office p { text-align: left; }
	#about { padding-bottom: 80px;}
	#about .about-title img {width: 95%;}
	#about table { width: 90%; font-size: 16px; font-size: 0.888rem; margin-bottom: 32px;}
	#about table th { padding: 14px 1px 14px; width: 32%;}
	#about td { padding: 14px 8px 14px 14px; line-height: 1.15;}
	span.sp {display: inline-block;}

	.contact-top-bg {background-image: url(../img/contact/sp-title-contact.png);}
	#contact { padding-top: 45px;}
	#contact p {font-size: 18px; font-size: 1.0rem; line-height: 1.5; margin: 45px auto;}
	#contact .contact-tell-box { width: 95%; padding: 40px 0px; background-size: 10%; margin-bottom: 40px; } 
	#contact .contact-line-box { width: 95%; padding: 40px 0px; background-size: 10%; margin-bottom: 40px; } 
	#contact .contact-form-box { width: 95%; padding: 40px 0px; background-size: 10%; }
	#contact .contact-tell-box h3, #contact .contact-line-box h3 {font-size: 21px; font-size: 1.166rem; line-height: 1.2; letter-spacing: 0em; margin-bottom: 15px;}
	#contact .contact-tell-box a img { width: 10%; margin-right: 8px;}
	#contact .contact-tell-box a span { font-size: 25px; font-size: 1.388rem; }
	#contact .c-box h3 {font-size: 21px; font-size: 1.166rem; line-height: 1.2; letter-spacing: 0em; margin-bottom: 15px;}
	#contact .c-box img { width: 15%; }
	#contact .c-box img.qrimg { width: 75%; margin: 10px auto 20px;}
	#contact .c-box p {font-size: 16px; font-size: 0.888rem; line-height: 1.2; width: 80%;}
	#contact .c-box p.qrp { text-align: center; margin: 0 auto;}

	#contact table {width: 90%; font-size: 14px; font-size: 0.777rem; letter-spacing: 0em; }
	#contact table th { padding: 20px 5px 20px 2px; width: 30%; font-weight: bold;}
	#contact table td { padding: 20px 0px 20px 3px; }
	#contact table td.red span{font-size: 12px; font-size: 0.666rem; border-radius: 3px; padding: 5px 2px;}
	#contact table input[type="submit"] { padding:6px 20px; font-size: 18px; font-size: 1.0rem; letter-spacing: 0em;}
	#contact table td span { font-size: 16px; font-size: 0.888rem }
	#contact table td span.contact-course-txt { vertical-align: text-top; }
	#contact table label.contact-course {margin-bottom: 2px;}
	#contact table th span.small { font-size: 12px; font-size: 0.666rem; font-weight: lighter; line-height: 2; letter-spacing: -0.1em;}
	#contact table textarea { width:90%; }

	#privacy { padding: 10%;}
	#privacy .policy ul { padding-left: 5%; }

	form input[type="submit"] { color:#fff; font-weight: bold; padding:6px 20px; font-size: 18px; font-size: 1.0rem; letter-spacing: 0em; line-height: 1.59; background-color: #5DC1CF; border: none; font-family: 'IBM Plex Sans JP', sans-serif; }

	/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #75C5CE;;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list{display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto;
	-webkit-overflow-scrolling: touch; }
#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
	text-align: center; 
	list-style: none;
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px 0px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
	top:10px;
	right: 10px;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #333;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

}


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

}