@charset "UTF-8";
/* Custom */
a:link { color: #585858; }
a:visited { color: #585858; }
a:hover { color: #a54a4a; }
a:active { color: #c3a942; }
#index_container2 { background: url(../common/data_img/index_1.png) left 8% center no-repeat; }
#img_container { background: url(../common/data_img/index_1.png) left 8% center no-repeat; }
h1 span { line-height: 180%; padding: 0; border-bottom: 3px double #a7b9a1; }
h2 { margin: 80px 1% 100px; }
h2 span { display: inline-block; position: relative; }
h2 span:before { content: ''; background-color: #b8c8d7; width: 110%; height: 4px; position: absolute; bottom: -15px; left: 50%; display: inline-block; transform: translateX(-50%); }
#footer #foot_logo { float: left; }
#glab_img { background: url(../common/data_img/dialogue.jpg) center / 100% no-repeat; width: 65%; float: left; margin: 0; padding: 90px 15% 90px 20%; display: block; border-radius: 15px; }
#glab_list ul { width: 100%; float: left; margin: 0; padding: 0; display: block; }
#glab_list li { width: 45%; float: left; margin: 0 5% 5% 0; padding: 0; display: block; }
#glab_name { font-size: 110%; font-weight: bolder; line-height: 130%; }
#clum3 { margin: 35px 0 0; }
#clum3 ul:nth-child(1) { width: 32%; }
#clum3 ul:nth-child(2) { width: 28%; }
#clum3 ul:nth-child(3) { width: 28%; }
/* shadow */
#sb_container #sb_main { font-size: 115%; line-height: 160%; background-color: #fff; width: 64%; float: left; margin: 5% 10%; padding: 5% 8%; display: block; border-radius: 15px; }
#sb_container #sb_main h2 span:before { content: ''; background-color: #fff; width: 300px; height: 0px; position: absolute; bottom: 0; left: 0; display: inline-block; transform: translateX(-50%); }
#sb_navi { display: none; } 

/* PC用 */
@media only screen and (min-width: 1001px) {
#logo { width: 12%; float: right; margin: 8px 0 0 1%; }
.nav ul { width: 84%; float: left; }
}

/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {
#logo { width: 12%; float: right; margin: 8px 0 0 1%; }
.nav ul { width: 84%; float: left; }
}

/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {
}

/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#index_container2 { background: url(../common/data_img/index_1.png) left 8% center / 50% no-repeat; }
#img_container { background: url(../common/data_img/index_1.png) left 8% center / 50% no-repeat; }
#glab_list li { width: 90%; margin: 0 5% 5%; }
}

/* Mobile2用 */
@media screen and (max-width: 540px) {
#index_container2 { background: url(../common/data_img/index_1.png) left 8% center / 50% no-repeat; }
#img_container { background: url(../common/data_img/index_1.png) left 8% center / 50% no-repeat; }
#glab_list li { width: 90%; margin: 0 5% 5%; }
}

/* activity */
#activity { width: 100%; overflow: hidden; margin: 0; padding: 30px 0; display: block; }
#activity h1 { text-align: center; letter-spacing: 0.2em; margin: 30px 0; padding: 0; }
#activity h1 span {  border-bottom: 3px double #fff; }
#activity h2 { margin: 40px 1% 30px; }
#activity h2 span:before { content: ''; width: 150px; }
#activity #three_culm { background: #fff; }
/* PC用 */
 only screen and (min-width: 1001px) {
}
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#activity h1 { letter-spacing: 0; }
}
/* Mobile2用 */
@media screen and (max-width: 540px) {
#activity h1 { letter-spacing: 0; }
}

/* practice */
#practice { width: 100%; overflow: hidden; margin: 0; padding: 30px 0; display: block; }
#practice h1 { text-align: center; letter-spacing: 0.2em; margin: 30px 0; padding: 0; }
#practice h2 { margin: 40px 1% 60px; }
#practice h2 span:before { content: ''; width: 150px; }
#practice #two_culm { background: #fff; }
#practice #two_culm p { margin: 0 6%; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#practice h1 { letter-spacing: 0; }
}
/* Mobile2用 */
@media screen and (max-width: 540px) {
#practice h1 { letter-spacing: 0; }
}

/* dialogue */
#dialogue { width: 100%; overflow: hidden; margin: 0; padding: 30px 0; display: block; }
#dialogue h1 { text-align: center; letter-spacing: 0.2em; margin: 30px 0; padding: 0; }
#dialogue h1 span { border-bottom: 3px double #fff; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#dialogue h1 { letter-spacing: 0; }
#dialogue li { width: 90%; margin: 0 5% 5%; }
}
/* Mobile2用 */
@media screen and (max-width: 540px) {
#dialogue h1 { letter-spacing: 0; }
#dialogue li { width: 90%; margin: 0 5% 5%; }
}

/* contents */
#contents { width: 100%; overflow: hidden; margin: 0; padding: 30px 0; display: block; }
#contents h1 { text-align: center; letter-spacing: 0.2em; margin: 30px 0; padding: 0; }
#contents h2 { margin: 40px 1% 60px; }
#contents h2 span:before { content: ''; width: 150px; }
#contents #two_culm { background: #fff; }
/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {}
/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {}
/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#contents h1 { letter-spacing: 0; }
}
/* Mobile2用 */
@media screen and (max-width: 540px) {
#contents h1 { letter-spacing: 0; }
}