@charset "UTF-8";

/* ================================================
   common
================================================ */
*	{
	margin:0;
	padding:0;
	}
html {
	min-width: 320px;
	font-size: 62.5%;
	/*10px*/
}

body {

}
.ie8 body {
	min-width: 1080px;
}

.main{
	font-family: source-han-sans-japanese, sans-serif;
		margin: 0;
	padding: 0;
	line-height:0;
	color:#010b0b;
	font-size: 14px;
	font-size: 1.4rem;
    font-style: normal;
    font-weight: 100;
	background:#FFF;
}

/*fluid image*/
img {
	max-width: 100%;
	height: auto;
}
.img_100{
	width:100%;
	max-width:100%;
	height:auto;
}
.img_h100{
	width:auto;
	height:100%;
}
.img_45{
	width:45%;
	max-width:45%;
	height:auto;
}


ul li {
	list-style-type: none;
}
ul.list li {
	list-style-type: disc;
	margin-left:30px;
	margin-bottom:15px;
}


.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	zoom: 1;
}

.align-center {
	text-align: center;
}
.align-left {
	text-align: left;
}
.align-right {
	text-align: right;
}

/*-----------------------------------------------------
	リンク
-------------------------------------------------------*/
/* img link mouseover */
	a.mouseOver:hover img{
		filter: alpha(opacity=70);
		-moz-opacity:0.7;
		opacity:0.7;
		-moz-transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
		}
a:link {
	color:#c00;
	text-decoration: underline;
	-moz-transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
	}

a:visited {
	color:#c00;
	text-decoration: underline;
	}

a:hover, a:active{
	color:#c00;
	text-decoration:underline;
	}


	
.oline_w{
		border:5px #ffffff solid;
		-moz-transition: 0.5s ease-in;
		-webkit-transition: 0.5s ease-in;
		transition: 0.5s ease-in;
	}

	
.oline_b_w:hover{
		border:5px #FF6699 solid;
		
		}

		
/*-----------------------------------------------------
	背景 ライン　模様
-------------------------------------------------------*/	
.right_dashed{
	border-right:1px dashed #c8c8c9;
	
}
.dotted_gray{
	border:1px dotted #c8c8c9;
	padding:20px;
	width:1010px;
	
}
.back_st{
	background:url(../img/strip_gray.png) repeat;	
	}
.back_w{
	background:#FFF;
	}

.back_yellow{
	background:#ffef00;
}


/* ================================================
   fluid gird system
================================================ */
/* 全体の幅 */
.gridSystemWidth {
	width: 1080px;
}

/*カラムを囲む要素につける*/
.row{
	margin: 1.38889% auto; 
	max-width: 1080px;
		} 
.row_h{
	margin: 5.55556% auto; 
	max-width: 1080px;
	}
.row_v0{
	margin: 0 auto; 
	max-width: 1080px;
	}
.row:after, .row_h:after, .row_v0:after{
	content: "";
	display: block;
	clear: both;
}

.row .row, .row_h .row, row_v0 .row{
	margin-left: -1.38889%;
	margin-right: -1.38889%;
	overflow: hidden;
}


/*カラム共通設定*/
.column {
	float: left;
	margin-left: 1.38889%;
	margin-right: 1.38889%;
}
/*カラムの幅
カラム幅60px、ガター30px、12カラムをベース*/
.large-1 {
	width: 5.55556%;
}
.large-2 {
	width: 13.88889%;
}
.large-3 {
	width: 22.22222%;
}
.large-4 {
	width: 30.55556%;
}
.large-5 {
	width: 38.88889%;
}
.large-6 {
	width: 47.22222%;
}
.large-7 {
	width: 55.55556%;
}
.large-8 {
	width: 63.88889%;
}
.large-9 {
	width: 72.22222%;
}
.large-10 {
	width: 80.55556%;
}
.large-11 {
	width: 88.88889%;
}
.large-12 {
	width: 97.22222%;
}

/*センター配置*/
.large-centered {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/*Media Queries for medium size
状況に応じて数値を変更する*/
@media screen and (max-width: 1023px) {
	/*カラムの幅
	カラム幅60px、ガター30px、12カラムをベース*/
	.medium-0 {
		width: 0%;
	}
	.medium-1 {
		width: 5.55556%;
	}
	.medium-2 {
		width: 13.88889%;
	}
	.medium-3 {
		width: 22.22222%;
	}
	.medium-4 {
		width: 30.55556%;
	}
	.medium-5 {
		width: 38.88889%;
	}
	.medium-6 {
		width: 47.22222%;
	}
	.medium-7 {
		width: 55.55556%;
	}
	.medium-8 {
		width: 63.88889%;
	}
	.medium-9 {
		width: 72.22222%;
	}
	.medium-10 {
		width: 80.55556%;
	}
	.medium-11 {
		width: 88.88889%;
	}
	.medium-12 {
		width: 97.22222%;
	}
	/*センター配置*/
	.medium-centered {
		margin-left: auto;
		margin-right: auto;
		float: none !important;
	}
	/*センター配置解除*/
	.medium-uncentered {
		margin-left: 1.38889%;
		margin-right: 1.38889%;
		float: left !important;
	}
}

/*Media Queries for small size
状況に応じて数値を変更する*/
@media screen and (max-width: 767px) {
	.column {
		margin-left:  1.35%;
		margin-right: 1.35%;
	}
	/*センター配置*/
	.small-centered {
		margin-left: auto;
		margin-right: auto;
		float: none !important;
	}
	/*センター配置解除*/
	.small-uncentered {
		margin-left:  1.35%;
		margin-right: 1.35%;
		float: left !important;
	}
	/*全てのカラムの幅*/
	[class*="large"],
	[class*="medium"] {
		width: 97%;
	}
	.small-1 {
		width: 5.55556%;
	}
	.small-2 {
		width: 13.88889%;
	}
	.small-3 {
		width: 22.22222%;
	}
	.small-4 {
		width: 30.55556%;
	}
	.small-5 {
		width: 38.88889%;
	}
	.small-6 {
		width: 47.22222%;
	}
	.small-7 {
		width: 55.55556%;
	}
	.small-8 {
		width: 63.88889%;
	}
	.small-9 {
		width: 72.22222%;
	}
	.small-10 {
		width: 80.55556%;
	}
	.small-11 {
		width: 88.88889%;
	}
	.small-12 {
		width: 97.22222%;
	}
}

/* ================================================
   Heading
================================================ */

/*キャンペーン*/
#h1-visual{
	position:relative;
	margin:0;
	padding:0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background:url("../img/top.jpg") no-repeat center bottom #e3e7f2;/*827×500*/
    background-size: cover;
    width: 100%;
    padding-top: 60%;
	height:500px;
}
.catch{
    position: absolute;
	top: 0;
	left: 0;
	width: 290px;
    height: auto;
  
	}

.catch_02{
    position: absolute;
	bottom: 5%;
	right:5%;
	width: 20%;
    height: auto;
  
	}

#h1-visual h1{
	position: absolute;
	bottom: 5%;
	left: 5%;
	width: 50%;
    height: auto;
	}
	
p{
    font-size:18px;
	font-size: 1.8rem;
    line-height: 1.3;
    
}


.nomal-wrapper{
	padding: 6em 0;
    position:relative;
    background: #e3e7f2;
}

#oubo_app{
	padding: 6em 0 0;
    position:relative;	
}

#oubo_jo{
    padding: 6em 0 ;
    position:relative;
	margin:0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background:url("../img/DSC_0261.jpg") no-repeat center center;/*889×500*/
    background-size: cover;
    width: 100%; 
	height:950px;
}
ol  {
  margin: 0;
  padding: 0;
  font-size:17px;
  font-size:1.7rem;
}
ol li {
  list-style: none;
  padding:0.75em 0 0 1em;
  text-indent: -1em;
  line-height: 1.35;
}
ol li ol li{
  font-weight: 100;
  text-indent: 0;
  font-size:15px;
  font-size:1.5rem;
}

/*#oubo_jo p{
    font-size:20px;
	font-size: 2.0rem;
    padding-bottom: 2em;
}*/

#oubo_app{
background: url("../img/app_back.png") repeat;
border-top: solid 25px #101c3f;
border-left: solid 25px #101c3f;
border-right: solid 25px #101c3f;
}



.oubo_app_obi{
    padding: 5em 0;
    background: #101c3f;
    text-align:center;
    color: #FFF;
    
}
.main h3.comment, .main p,.main ol li{
	font-family: fot-tsukuardgothic-std, sans-serif;
    font-style: normal;
    font-weight: 700;
    }

	
h3.comment{
    font-weight: 700;
	text-align:center;
	font-size:40px;
	font-size: 4.0rem;
    line-height: 1.5;
    padding-bottom: 1.8em;
	color: #010b0b;
	}
	





/*profile*/	
.profile{

overflow:hidden;
}



/* appli*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: inline-block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: inline-block !important; }
}

	

	

/* ================================================
   button
================================================ */
/* .btn {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px #e6e6e6 solid;
	border-radius: 3px;
	color: #333;
	text-decoration: none;
	background: #83a603;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #83a603), color-stop(100%, #7fa103));
	background-image: -webkit-linear-gradient(top, #83a603, #7fa103);
	background-image: -moz-linear-gradient(top, #83a603, #7fa103);
	background-image: -o-linear-gradient(top, #83a603, #7fa103);
	background-image: linear-gradient(top, #83a603, #7fa103);
	color: #fff;
}
.btn:hover {
	background: #93ba03;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93ba03), color-stop(100%, #8bb003));
	background-image: -webkit-linear-gradient(top, #93ba03, #8bb003);
	background-image: -moz-linear-gradient(top, #93ba03, #8bb003);
	background-image: -o-linear-gradient(top, #93ba03, #8bb003);
	background-image: linear-gradient(top, #93ba03, #8bb003);
}
*/
/* ================================================
   layout
================================================ */
/*Gmenu*/
#d_menu {
	border-top: 1px solid #BDBDBD;
	border-bottom: 1px solid #BDBDBD;
	background:#fff;
	
	
}
#d_menu .header-inner {
	position: relative;
	max-width: 1080px;
	padding: 0 10px;
	margin: 0 auto;
	
	text-align:center;
}

#d_menu #nav-btn {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
}
#d_menu #nav-btn a {
	display: block;
	width: 40px;
	height: 40px;
	background: url(../img/bg_nav_btn.png) 0 0 no-repeat;
	text-indent: -9999px;
}
#d_menu #nav-btn.show a {
	background-position: 0 -40px;
}

#d-nav {
	
}
#d-nav ul {
	float: none;
	margin: 0 ;
	padding: 0;	
	font-size: 0;
	
}

#d-nav ul li {
	float: left;
	font-size: 90%;
  	font-size: 12px;
	border-right:1px solid #BDBDBD;
  	width: 16.5%;
	/*float: left;
	font-size: 87%;*/
}

#d-nav ul li:first-child{
	border-left:1px solid #BDBDBD;
}



#d-nav ul a {
	display: block;
	padding: 10px 10px;
	/*color: #fff;*/
	text-decoration: none;
	
}
#d-nav ul a:hover, #d-nav ul  a:active{
	/*background-color: #ff8500;*/
	background-color:rgba(255,133,0,0.9);
	
	text-decoration: underline;
	-moz-transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
	color:#fff;
}


.article_body{
	overflow:hidden;
	clear:both;
	width:100%;

	}





.text {
	text-align: left;
}






	

/*youTube動画*/	
		

		
		
	.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;	
}
 
	.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
}



/*Media Queries for tablet*/
@media only screen and (max-width: 1023px) {

/*キャンペーン*/

.catch{
    position: absolute;

	width: 210px;
    height: auto;
	}

#h1-visual h1{
	
	left: 5%;
    bottom: 5%;
    wwidth: 50%;
    height: auto;

	}
.catch_02{
    position: absolute;
	bottom: 5%;
	right:5%;
	width: 200px;
    height: auto;
  
	}



/*Gmenu*/
	#d_menu {
		position: relative;
		/*top: 0;*/
		left: 0;
		z-index: 10;
		width: 100%;
		height: 44px;
		
	}

	#d_menu #nav-btn {
		display: block;
		margin-top:1px;
	}
	
	#d-nav {
		margin: 0 -10px;
		padding-top: 0;
		
	}
	#d-nav ul {
		display: none;
		float: none;
		overflow: hidden;
		margin-right: 0;
		font-size:none;
	}
	
	#d-nav ul li:first-child, #d-nav ul li:nth-child(7)  {
		border-left: none;
		margin-left:0;
}

	#d-nav ul li {
		float: left;
		width: 19%;
		/*width: 16.66667%;*/
		text-align: center;
		border-bottom:1px solid #BDBDBD;
		border-right:1px solid #BDBDBD;
		background-color: rgba(255,255,255,0.9);
		
	}
	#d-nav ul a {
		padding: 13px 0;
	
	}
	#d-nav ul a:hover, #d-nav ul a:active{
		background-color:rgba(255,133,0,0.9);
		color:#FFF;
	}



	
	




}


/*Media Queries for small tablet & smart phone*/
@media only screen and (max-width: 767px) {
	body{
	font-size: 12px;
	font-size: 1.2rem;
	}

#h1-visual{
	position:relative;
	margin:0;
	padding:0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background:url("../img/top_ss.jpg") no-repeat center bottom #e3e7f2;/*300×448*/
    background-size: cover;
    width: 100%;
    padding-top: 149%;
	height:448px;
}
#h1-visual h1{
    left: 3%;
    bottom: 3%;
    width: 93%;
    height: auto;
    }
.i_midokoro{
     width: 190px;
     height: auto;
        
    }

.catch{
    position: absolute;

	width: 200px;
    height: auto;
	}

.catch_02{
    display: none;
  
	}
#oubo_app{
  border-top: solid 12px #101c3f;
  border-left: solid 12px #101c3f;
  border-right: solid 12px #101c3f;
}
	
h3.comment{
	font-size:30px;
	font-size: 3.0rem;

	}



p{
    font-size:15px;
	font-size: 1.5rem;
    
}

ol  {
  font-size:14px;
  font-size:1.4rem;
}

ol li ol li{
  font-size:12px;
  font-size:1.2rem;
}	

/*Gmenu*/
#d-nav {
		padding-right:0;		
	}

		
#d-nav ul li {
		width: 100%;
		border-bottom:1px solid #BDBDBD;
	}
#d-nav ul li a{
		padding: 15px 0;
		
	}




}

/*Media Queries for small tablet & smart phone*/
@media only screen and (max-width:419px) {
/*キャンペーン*/
    .i_midokoro{
     width: 160px;
     height: auto;
        
    }
    
    
#oubo_jo{
    
	height:930px;
}




#h1-visual h1{
    bottom: 3%;
	right: 0;
	width: 93%;
	
}



}