@charset "UTF-8";

/*
**********************************************************************

* index.css

* site name   : yamagiwa
* description : Import need style sheets
* since       : 2018-10
* editor      : Office ThroughSky  Tominaga 

*********************************************************************
*/

	 
.ccccc-ccccc-kokokara-mini {}

	@media screen and (max-width: 449px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
.concept-section {
	/**/
	width: 320px;
	margin-top: 5em;
	margin-right: auto;
	margin-left: auto;
		}
.concept-section h3{
		}
.concept-section h4{
	margin-left: 0.5em;
		}
.concept-text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	float: right;
	}
.concept-text p {
	font-size: 0.9em;
	}
#concept01 {
	margin-top: 2em;
	margin-bottom: 15em;
	height: 27em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept-img01.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 7em;
	padding-right: 6em;
		}
#concept-text01 p{
	height: 14em;
	background-color: #FFF;
	padding-left: 0.5em;
		}
#concept02 {
	height: 18em;
	margin-top: 2em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept02back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top:5em;
	margin-bottom: 400px;
		}
.concept-section h4{
		}
#concept02-text{
	float: right;
	width: 16em;
	margin-bottom: 3em;
		}
#concept02-img{
		}
#concept02-more{
	margin-top: 18em;
		}
#concept-img02{
	height: 130px;
	width: 200px;
		}
#concept-img03{
	margin-top: 5px;
	margin-left: 120px;
	height: 130px;
	width: 200px;
		}
#concept03-more {
	margin-top: 15em;
	margin-right: 0.7em;
		}
#concept03 {
	height: 25em;
	margin-top: 12em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept03back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept03-text{
		}
		
#concept-img04{
	float: left;
	margin-top: 10px;
	height: auto;
	width: 155px;
	margin-right: 10px;
	/*
	*/
		}
#concept-img05{
	float: left;
	margin-top: 10px;	
	height: auto;
	width: 155px;
		}
#concept-img06{
	float: right;
	width: 155px;
	margin-right: 23px;
		}	
		
#concept04 {
	height: 25em;
	margin-top: 15em;
	margin-bottom: 15em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept04back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept04-text{
	float: right;
		}
#concept04-more {
		}
#concept-more03{
		}
#concept-img07{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img08{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img09{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img10{
	float: right;
	height: auto;
	width: 155px;
	margin-right: 20px;
	clear: left;
	}
}
	 
	 
.ccccc-ccccc-kokokara-big {}
	 
	@media screen and (min-width: 450px) and (max-width: 800px) {
   /* 表示領域が450以上800px以下の場合に適用するスタイル */
						/*（グローバルナビ用）CSS */
.concept-section {
	/**/
	width: 320px;
	margin-top: 5em;
	margin-right: auto;
	margin-left: auto;
		}
.concept-section h3{
		}
.concept-section h4{
	margin-left: 0.5em;
		}
.concept-text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	float: right;
	}
.concept-text p {
	font-size: 0.9em;
	}
#concept01 {
	margin-top: 2em;
	margin-bottom: 15em;
	height: 27em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept-img01.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 7em;
	padding-right: 6em;
		}
#concept-text01 p{
	height: 14em;
	background-color: #FFF;
	padding-left: 0.5em;
		}
#concept02 {
	height: 18em;
	margin-top: 2em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept02back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top:5em;
	margin-bottom: 600px;
		}
.concept-section h4{
		}
#concept02-text{
	float: right;
	width: 16em;
	margin-bottom: 3em;
		}
#concept02-img{
		}
#concept02-more{
	margin-top: 18em;
		}
#concept-img02{
	height: 130px;
	width: 200px;
		}
#concept-img03{
	margin-top: 5px;
	margin-left: 120px;
	height: 130px;
	width: 200px;
		}
#concept03-more {
	margin-top: 15em;
	margin-right: 0.7em;
		}
#concept03 {
	height: 25em;
	margin-top: 12em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept03back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept03-text{
		}
		
#concept-img04{
	float: left;
	margin-top: 10px;
	height: auto;
	width: 155px;
	margin-right: 10px;
	/*
	*/
		}
#concept-img05{
	float: left;
	margin-top: 10px;	
	height: auto;
	width: 155px;
		}
#concept-img06{
	float: right;
	width: 155px;
	margin-right: 23px;
		}	
		
#concept04 {
	height: 25em;
	margin-top: 15em;
	margin-bottom: 15em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept04back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept04-text{
	float: right;
		}
#concept04-more {
		}
#concept-more03{
		}
#concept-img07{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img08{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img09{
	float: right;
	height: auto;
	width: 155px;
	margin-bottom: 10px;
	margin-right: 20px;
		}
#concept-img10{
	float: right;
	height: auto;
	width: 155px;
	margin-right: 20px;
	clear: left;
	}
}
	 
	 @media screen and (min-width: 801px) {
   /* 表示領域が801px以上の場合に適用するスタイル */
	.concept-section{
	margin-top: 5em;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
		}
.concept-section h3{
		}
.concept-section h4{
	margin-left: 0.5em;
		}
.concept-text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	float: right;
	}
.concept-text p {
	font-size: 0.9em;
	}
#concept01 {
	margin-top: 2em;
	margin-bottom: 15em;
	height: 17em;
		}
#concept-text01{
	font-size: 1em;
		}
#concept-img01{
	width: 460px;
		}
#concept01 {
	margin-top: 2em;
	margin-bottom: 15em;
	height: 17em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept-img01.png);
	background-repeat: no-repeat;
	background-position: left top;
		}
#concept-text01 p{
	float: left;
	width: 6em;
	background-color: #FFF;
	padding-left: 1em;
		}
#concept02 {
	height: 17em;
	margin-top: 2em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept02back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
.concept-section h4{
		}
#concept02-text{
	float: left;
	width: 18em;
		}
#concept02-img{
		}
#concept02-more{
	margin-top: 16em;
		}
#concept-img02{
	margin-left: 1em;
		}
#concept-img03{
	margin-left: 5em;
		}
#concept03-more {
	margin-top: 6.5em;
	margin-right: 0.7em;
		}
#concept03 {
	height: 18em;
	margin-top: 15em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept03back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept03-text{
	float: right;
	width: 18em;
		}
#concept-img04{
	float: left;
	margin-top: 0.7em;	
		}
#concept-img05{
	float: left;
	margin-top: 1em;	
	/*
	float: right;
	margin-top: 1em;
	margin-right: 1.5em;
	*/
		}
#concept-img06{
	float: right;
	/*
	float: left;
	float: right;
	margin-top: 1em;
	margin-right: 1em;
	*/
		}
#concept04 {
	height: 19em;
	margin-top: 15em;
	margin-bottom: 15em;
	background-attachment: scroll;
	background-image: url(../img/concept/concept04back-img.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3em;
		}
#concept04-text{
	float: left;
		}
#concept04-more {
		}
#concept-more03{
		}
#concept-img07{
	float: right;
	margin-bottom: 1.5em;
		}
#concept-img08{
	float: right;
	margin-right: 1.5em;
		}
#concept-img09{
	float: right;
	clear: right;
		}
#concept-img10{
	float: right;
	margin-right: 1.5em;
	}
}