@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ◆◆◆コンテンツ◆◆◆ */


/* ─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　 */
/* メイン */

    
/* セクション汎用 */
main > section{
	min-height	: 20vw;
	padding		:100px 0;
	overflow		:hidden;
	position		: relative;
    
	color		: #4e5457;
}
/* セクション汎用：偶数：文字左 */
main > section:nth-child(even){
	padding		        :100px 55% 100px 5%;
	background	        :#eee;
}
/* セクション汎用：奇数：文字右 */
main > section:nth-child(odd){
	padding		:100px 5% 100px 55%;
	background	:#fff;
}
/* セクション汎用：第二階層 */
main > section > section{
	margin		:1em 0 1em 1em;
}
/* セクション汎用：第三階層 */
main > section > section > section{
	margin		:1em 0 1em 1em;
}


/* セクション汎用：見出し、本文 */
main > section > h2{
	font-family	: 'M PLUS 1p', sans-serif;
	font-weight	: 500; 
	font-size		: 35px;
	line-height	: 1.25em;
	color		: #222;
}
main > section > section > h3{
	font-weight	:bold;    
	color		: #444;
}
main > section > section > section > h4{
	margin-top	:1em;
}
main > section p{
	font-size		: 16px;
	margin-top	: 2em;
}
main > section > section > h3 + p{
	margin-top:0;
}
main > section em{
    font-style  : normal;
    font-weight : bold;
    color       : #444;
}


/* セクション汎用：イメージ画像 */
main > section:nth-child(2) > div.image{
    background-image:
        linear-gradient(to right, rgba(238, 238, 238, 1), 70%, rgba(26, 187, 192, 0.2)),
        url('/common/img/money_shot.jpg');
	background-size	:cover;
}
main > section:nth-child(3) > div.image{
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.2), 30%, rgba(255, 255, 255, 1)),
        url('/common/img/6x1_sketchin_technique.jpg');
	background-size	:cover;
}
main > section:nth-child(4) > div.image{
    background-image: 
        linear-gradient(to right, rgba(238, 238, 238, 1), 70%, rgba(26, 187, 192, 0.2)),
        url('/common/img/hotrod_engine.jpg');
	background-size	:cover;
}
main > section:nth-child(5) > div.image{
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.2), 30%, rgba(255, 255, 255, 1)),
        url('/common/img/type_posters.jpg');
	background-size	:cover;
}
main > section:nth-child(6) > div.image{
    background-image: 
        linear-gradient(to right, rgba(238, 238, 238, 1), 70%, rgba(26, 187, 192, 0.2)),
        url('/common/img/lighthouse_in_the_night.jpg');
	background-size	:cover;
}


/* セクション汎用：イメージ画像：偶数：文字左 */
main > section:nth-child(even) > div.image{
    position	: absolute;
    top		:0;
    left		:50%;
    right		:0;
    bottom	:0;
    background-position: center top;
    background-position: unset;
}
/* セクション汎用：イメージ画像：偶数：文字右 */
main > section:nth-child(odd) > div.image{
    position	: absolute;
    top		:0;
    left		:0;
    right		:50%;
    bottom	:0;
    background-position: center;
    background-position: unset;
}


/* セクション汎用：イメージ画像:クレジット */
main > section > div.image div{
	position	: absolute;
	bottom	:0;
	right	:1em;

	font-size	:10px;
	color	:rgba(0,0,0,0.7);
	text-shadow: rgba(255,255,255,1) 0px 0px 6px;
} 


/* セクション汎用：コンテンツ：リスト */
main > section ol,
main > section ul{
	list-style-position:outside;
    margin-left: 1.5em;
}


/* 文字汎用：改行制御 */
span.phrase, em{
	display:inline-block;
}


/* リードセクション */
main > div:first-child{
	min-height         	 	: auto;
	padding				: 100px 5%;
    
	background-color		: #1abbc0;
	background-image	: linear-gradient(to right, rgba(26,187,192,0) 50%, rgba(26,187,192,1)),
							url(/common/img/drawing_logo.svg);
	background-position	: center right;
	background-repeat	: no-repeat;
	
	color				:#fff;
	text-shadow			: rgba(26,187,192,1) 0px 0px 6px;
}
main > div:first-child h1{
	margin-top	: 2em;
	
	font-size		: 30px;
	font-family	: sans-serif;
	color		: #fff;
}
main > div:first-child p{
	margin-top	: 0.17em;
	margin-left	: 0;
	font-size		: 30px;
}
main > div:first-child p a{
	display		: block;
	margin		: 1em 0;
	text-shadow	: none;
}


/* ロゴサンプル */
main section.sample{
	box-sizing:border-box;
}


/* ユーザーズボイス */
main section.voice{
    min-height          : auto;
	padding :50px 5%;
}
main section.voice > h2{
	margin  :0;
}
main section.voice > div{
	box-sizing: border-box;
	width	:calc(100% / 3);
	padding	: 1em;
	margin	: 1em 0;
	float	: left;
	
	vertical-align: top;
}
main section.voice > div.aggregateRating{
	width	:100%;
	padding	: 0;
	margin	: 0;
	
	float	: none;
	clear	:both;
	
	text-align:center;
	color: #999;
}
main section.voice > div.aggregateRating .data{
	display:none;
}
main section.voice > div img{
	display     : block;
	width       : 15vw;
	height      : 15vw;
	margin      : auto ;
    
	border-radius:50%;
	background	: #cfe;
}
main section.voice > div h3{
	font-size   : 1.25em;
	margin      :1em 0 0;
}
main section.voice > div h3 + p{
    margin-top	: 0;
    line-height		: 1em;
    color			:#999;
} 
main section.voice > div p{
	margin      :1em 0 ;
}

    
/* 誘導 */
main section.lets_try{
	min-height		:auto;
	padding			:100px 5%;
	background-color	:#1abbc0;

	text-align		:center;
}
main section.lets_try h2{
	display	: inline-block;
	margin	:1em;
	color	: #fff;
}
main section.lets_try a{
    margin: 0;
    position: relative;
    top: -0.25em;
}
    
    
/* 表組 */
main section table{
	margin:1em 0 0;
	font-size:0.8em;
	border-collapse: collapse;
}
main section table td{
	border-bottom:1px solid #555;
}
main section table td{
	padding:0 2em 0 0;
}
main section table caption {
    caption-side: bottom;
    text-align:left;
}
/* 表組：第二階層 */
main section section section table{
	margin:1em 0 2em 1em;
	font-size:0.8em;
	border-collapse: collapse;
}
main section section section table caption {
    caption-side: top;
    text-align:left;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ◆◆◆BEGIN メディアクエリー◆◆◆ */


@media (max-width: 500px) {
    
    


/* セクション汎用 */
main > section{
	padding	:100px 0;
	overflow	:hidden;
    
	position: relative;
}
/* セクション汎用：偶数：文字左 */
main > section:nth-child(even){
	padding		        :55vw 5% 50px 5%;
	padding		        :60vw 5% 50px 5%;
	background-color	:#eee;
}
/* セクション汎用：奇数：文字右 */
main > section:nth-child(odd){
	padding		        :55vw 5% 25px 5%;
	padding		        :60vw 5% 25px 5%;
	background-color	:#fff;
}    
    
    
/* セクション汎用：イメージ画像：偶数：文字左 */
main > section:nth-child(even) > div.image{
    position    :absolute;
    top         :0;
    left        :0;
    right       :0;
    height      :50vw;
}
/* セクション汎用：イメージ画像：偶数：文字右 */
main > section:nth-child(odd) > div.image{
    position    :absolute;
    top         :0;
    left        :0;
    right       :0;
    height      :50vw;
}    
    
    
/* リードセクション */
main > div:first-child{
	padding				:10px 5%;
	background-color		:   #1abbc0;
	background-image	:	linear-gradient(to right, rgba(26,187,192,0.8) 0%, rgba(26,187,192,0.8)),
							url(/common/img/drawing_logo.svg);
}
main > div:first-child p{
	margin-top:1em;
	font-size	:22px;
}
main > div:first-child br{
    display: none;
}
    
    
/* ユーザーズボイス */
main section.voice{
	padding :2em 5%;
}
main section.voice > div{
	width	: 100%;
}
main section.voice > div img{
	width       : 30vw;
	height      : 30vw;
}

    
/* 誘導 */    
main section.lets_try{
	padding :10px 5%;
    background-color	:   #1abbc0;
        
    text-align: center;
}    
main section.lets_try a.button{
    margin: 1em;
}    
    
    
    
    
}
/* ◆◆◆END メディアクエリー◆◆◆ */