/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");



body{
color:#333;
background:#fff url(../images/bg.png);
font-size:62.5%;
font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;
}
p{
line-height:1.8;
font-size: 16px;
}
strong {
    font-weight: bold;
}
/*================================
HEADER
================================*/
#siteID {
	padding: 10px 0;
    background-color: #36C;
    color: #ffffff;
}

#siteID h1 {
	font-size: 20px;
	font-weight: 400;
	font-family: 'Marcellus', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    text-align: center;
}

#siteID .description {
	font-size: 15px;
	color:#F69;
}
/*================================
画像のサイズを100%にする
================================*/
img{
max-width: 100%;
height: auto;
width /***/:auto;　/*IE8のみ適用*/
}

a:hover {
    opacity: 0.7;
}
/*===============================
contents
===============================*/
.box {
background: #fff;
padding:20px 15px 15px;
margin-bottom:20px;
font-size:1.5em;
position:relative;
word-wrap:break-word;
}

.box:after {
display: block;
clear: both;
height: 0;
content:"";
}

.box h2{
    margin: 1em 0;
    padding: 15px;
    border-top: 2px solid #009b85;
    border-bottom: 2px solid #009b85;
    font-size: 22px;
    font-weight: 700!important;
    line-height: 1.5em;
    text-align: center;
    color: #009b85;
}
.box h2 span{
font-size:80%;
}

.box h3{
    font-size: 20px;
    text-align: left;
    padding: 5px 10px;
    width: 100%;
    border-left: 10px solid #009b85;
    font-weight: bold;
    margin-bottom: 10px;
}
.box h4{
    font-size: 18px;
    text-align: left;
    font-weight: bold;
    margin: 1rem 0 0.5rem;
}
.textbox {
	margin-bottom:40px;
}
.t_center {
	text-align:center;
}
.strong {
	font-weight:bold;
	background:#FF0;
}
.strong2 {
	font-weight:bold;
	background:#FF0;
    font-size: 20px;
}
.caption {
    font-size: 90%;
}

.bgred {
	border: 1px solid #dddddd;
	background-color: lightcyan;
	margin: 30px 0;
	padding: 20px 40px 40px;
}
.text01 {
        text-align: center;
        font-size: 2rem;
    } 


/*===============================
table
===============================*/
table {
	margin: 1rem auto;
	font-size: 18px;
	line-height: 1.8;
	border-collapse: collapse;
	background-color: #fff;
}
table td {
	border: 1px solid #000;
	padding: 0.5rem 2rem;
}
table td span {
	font-size: 1.5rem;
}
table td strong {
	font-size: 1.6rem;
}
td:nth-child(odd) {
	background-color:antiquewhite;
}
.border{
    background:#fff;
padding:5px;
box-shadow:0 1px 3px #aaa;
-webkit-box-shadow:0 1px 3px #aaa;
-moz-box-shadow:0 1px 3px #aaa;
behavior: url(PIE.htc);

}
.maru {
    border-radius: 50%;
}
.alignleft {
display: block;
float: left;
margin-right: 15px;
margin-bottom:1em;

}
.aligncenter {
display: block;
margin:0 auto;
}
.alignright {
display: block;
float: right;
margin-left: 15px;
margin-bottom:1em;
}
.youtube {
    text-align: center;
}
/*================================
詳細ボタン用
================================*/
.btn a {
	display:block;
	width:88%;
	border-radius:8px;
	background-color:#09C;
	line-height: 1.8;
	color:#FFF;
	padding:1rem;
	margin:1em auto 2em;
	text-align:center;
	text-decoration:none;
	box-shadow: 0px 5px rgba(0,0,0,0.4);
	position:relative;
	max-width:700px;
    font-size: 20px;
    font-weight: bold;
}
.btn a:hover{
    opacity: 0.7;
}

/*================================
SIDEBARの装飾
================================*/
#sidebar{
font-size:1.3em;
}

.sideinfo {
background:#fff;
border:1px solid #999;
padding:15px;
margin-bottom:30px;

}

.sideinfo h4,
.ad h4{
font-size:1.6em;
border-bottom:2px solid #999;
margin-bottom:15px;
}

.sideinfo h5{
font-weight:bold;
font-size:1.2em;
}


.newentry img{
float:left;
margin:0 7px 5px 0;
border:1px solid #999;
padding:3px;
}

.newentry dd{
margin-top:10px;
}

.newentry h5 a{
color:#069;
text-decoration:none;
}

.newentry h5 a:hover{
color:#c00;
}

.newentry p{
margin-bottom:15px;
}

.icon-file-text-alt{
font-size:1.1em;
margin:0 5px 0;
}
/*==========================================
    使いまわし
============================================*/
.mb1 {margin-bottom: 1rem;}
.mb2 {margin-bottom: 2rem;}
.mb3 {margin-bottom: 3rem;}
.col3 li {
margin-bottom: 2rem;    
}
 
 
.answer_image{
     float: right;
     width:15%;
}
 
.answer_image img,
.question_image img{
    border-radius: 50px;
    display: block;
    margin: 0 auto;
    max-width: 60px;
    width: 100%;
}
 
.question_Box .name {
    text-align: center;
    font-size: 12px;
}
.question_Box{
     width: 100%;
     overflow: hidden;
     margin-bottom: 8px;
}
.question_Box:nth-child(even){
     margin-bottom: 25px;
}
/*================================
画像＋テキスト 1
================================*/
.flex h4 {
    font-size: 20px;
    color: #FF8C00;
    margin-top: 10px; 
}
.flex img{
  display: block;
    max-width: 100%;
    margin: 0 auto 1rem;
}
.item {
    width: 48%;
}
.item p {
    font-size: 14px;
}   
@media screen and (min-width:600px) { 
  .flex{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }

.item+.item{
    margin-left:1.0em;
  }
}
@media screen and (max-width:600px) {
    .item {width: 100%;}
}
/*================================
画像＋テキスト 2　体験談など
================================*/
.flex2 {
    border-top:3px double #cccccc;
    border-bottom:3px double #cccccc;
    padding:1rem 0;
    margin-bottom: 1rem;
}
.flex2 h4 {
    font-size: 20px;
    color: #FF8C00;
    margin-top: 10px; 
}
.flex2 img{
  display: block;
    max-width: 70%;
    margin: 0 auto;
    border-radius: 10px;
    }
.item3{color: #0000FF;}   
@media screen and (min-width:600px) { 
  .flex2{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
    .item2{margin: 0 10px;
    width: 30%;}
     .item3{margin: 0 10px;
    width: 70%;}   
}
@media screen and (max-width:600px) {
    .item2 {width: 100%;}
.flex2 img{
    max-width: 50%;
    margin-bottom: 1rem
}  
}
/*================================
改行
================================*/

.only_desktop {
	display: block;
}
.only_mobile {
	display: none;
}
@media screen and (max-width: 812px) {
.only_mobile {
	display: block;
}
.only_desktop {
	display: none;
}
}
/* RESPONSIVE 設定
------------------------------------------------------------*/
@media only screen and (min-width: 800px){
	.col3 li{
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}
    .col3 {
    margin: 0 auto;
    width: 820px;
    }
}

/*================================
FOOTER
================================*/
#footer{
	margin-top:20px;
	background:#36C;
}

#footer p{
	text-align:center;
	color:#fff;
	padding:10px 0;
    font-size: 12px;
}




@media ( max-width : 768px ) {
/*スマホの設定*/
.span_8,
.span_4{
padding-left:10px;
padding-right:10px;
}
.box h1 {
	font-size: 26px;
}
p{
line-height:1.5;
font-size: 16px;
}
/*詳細ボタンのサイズ設定*/
p.more{
margin:20px 20px 0;
}

p.more a{
	padding:10px 0;
	font-size:1.3em;
}
/*youtube*/
.youtube {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
	margin: 0 0 10px;
}
.youtube iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.box h2{
font-size:1.3em;
}

.box h3{
font-size:1.2em;
} 
.strong{
    line-height: 1.8;
} 
 table td {
	border: 1px solid #000;
	padding: 5px;
    font-size: 13px;
}
table td span {
	font-size: 18px;
}
table td strong {
	font-size: 15px;
}
img.only_desktop {
	display: none;
}
.text01 {
        font-size: 1.3rem;
        line-height: 1.4;
    }
.bgred {
	margin: 30px 0;
	padding:20px;
} 
.btn a {
    font-size: 18px;
    line-height: 1.4;
}    
}
@media ( min-width : 768px ) {
br.only_mobile,
img.only_mobile {
	display: none;
}
}