@charset "utf-8";

/*--hero--*/
.hero h2{padding:1em 0; font-size:2em;width:1000px; margin:0 auto; position:relative}
.hero h2 span{color:transparent;}
.hero h2:after{content:"";width:80%; height:3px; display:block; position:absolute;
bottom: 1.32em;left: 4.2em;margin: auto;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 25%, rgba(255,255,255,0.99) 26%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(25%, rgba(255,255,255,1)), color-stop(26%, rgba(255,255,255,0.99)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 25%, rgba(255,255,255,0.99) 26%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 25%, rgba(255,255,255,0.99) 26%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 25%, rgba(255,255,255,0.99) 26%, rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 25%, rgba(255,255,255,0.99) 26%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.about .hero{background:url(../img/about/herobg.jpg) right no-repeat,url(../img/about/aboutbg.gif) repeat-x;background-size:60%,contain} 
.grouphome .hero{background:url(../img/grouphome/herobg.jpg) right no-repeat,url(../img/grouphome/groupbg.gif) repeat-x;background-size:60%,contain}
.inquiry .hero{background:url(../img/inquiry/herobg.jpg) right no-repeat,url(../img/inquiry/inquirybg.gif) repeat-x;background-size:60%,contain}

.about .hero h2{background:url(../img/about/hero.png) left no-repeat ; background-size:contain;}
.grouphome .hero h2{background:url(../img/grouphome/hero.png) left no-repeat; background-size:contain;}
.inquiry .hero h2{background:url(../img/inquiry/hero.png) left no-repeat ; background-size:contain;}
.inquiry .hero h2:after{left:3.6em}

section{width:900px; margin:2em auto;}
section h2,.about section h3{color:#ff5400; font-size:2em; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; fnt-weight:bold; padding:.5em 0;}
section h2{border-bottom:2px #3ebd07 dotted; margin-bottom:1em}

dl{margin:0 auto;}
dl dt{font-size:1.2em; font-weight:bold; color:#ff3522;}
dl dt:before{content:"◎";display:inline-block;font-size:1.5em; position:relative;top:2px}
dl dd{margin-left:2em; margin-bottom:1em}
dl dd ul{list-style:disc; padding-left:1.5em}

section iframe{width:100%; height:350px; margin-bottom:3em}

/*--about--*/
.about .flex figure{width:25%;}
.about .flex .txt{width:71%; line-height:2em}
.about .txt p+p{text-indent:1em;}
.about table{ border-collapse:collapse; border-bottom:1px #ccc solid; margin-bottom:1em}
.about table th,.about table td{padding:1em; border-top:1px #ccc solid;}
.about table th{background:#fef3de;}

/*--grouphome--*/
h2.gph{background:#ff9a00;color:#fff; border-left:10px #f4c95e solid; padding:.5em .8em;font-size:1.5em; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; fnt-weight:bold; border-bottom:none;}

div.picflex{overflow:hidden;}
div.picflex figure{width:68%; float:left}
div.picflex div{display:block; width:30%; float:right}
div.picflex div img{object-fit:contain}
div.picflex div img:hover{opacity:.8}

ul.glry{display:flex; justify-content:space-between;flex-wrap:wrap; align-items:center; margin:1em auto}
ul.glry li{width:19%; margin-bottom:.5em}
ul.glry li.ta{width:10%; margin-bottom:.5em}
ul.glry li img{object-fit:contain; cursor:pointer}
ul.glry li img:hover{opacity:.8}

ul.atte{padding:1em 1.5em 1em 3em; border:1px #ccc solid; border-radius:1em;}

/*--inquiry--*/
.inquiry section h2{margin-bottom:.5em;}
.inquiry section h3{color:#ff3522; position:relative;font-size:1.5em;font-weight:bold}
.inquiry section h3 a{text-decoration:none; font-size:2em;font-weight:bold;color:#ff3522; margin:0 .5em; position:relative;top:.2em}
.inquiry section h3 span{color:#000;}
@media screen and (max-width: 700px){

.hero h2{width:100%; padding:.5em 0}
.hero h2:after{bottom:.9em;left:2.8em;}
.inquiry .hero h2:after {left: 2.6em;}

section{width:98%;margin:0 auto 2em}

.about .flex{justify-content:center}
.about .flex figure{text-align:center;}
.about .flex figure,.about .flex .txt{width:95%}

.inquiry section h3 a{font-size:1.4em;}
.inquiry section h3 span{display:block; text-align:center}


}