@charset "utf-8";
@import url(./y-base-style.css);


/* -- fontawesome から、必要なアイコンだけを設定 ここから -- */
@font-face {
  font-family: 'icoyastudio';
  src:  url('../fonts/icoyastudio.eot?3n69ht');
  src:  url('../fonts/icoyastudio.eot?3n69ht#iefix') format('embedded-opentype'),
    url('../fonts/icoyastudio.ttf?3n69ht') format('truetype'),
    url('../fonts/icoyastudio.woff?3n69ht') format('woff'),
    url('../fonts/icoyastudio.svg?3n69ht#icoyastudio') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icoyastudio' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-search:before { content: "\f002"; }
.icon-remove:before { content: "\f00d"; }
.icon-wrench:before { content: "\f0ad"; }
/* -- fontawesome から、必要なアイコンだけを設定 ここまで -- */


/* -- --------------------- -- */
/* -- ページのメインとなる説明文 -- */
/* -- --------------------- -- */
.comment{
	text-align:left;
	font-weight:normal;
	font-size:100%;
	line-height:2em;
	width:90%;
	max-width:620px;
	margin:2rem auto;
}

/* -- 表題関連 -- */
.title_block{ margin:1.5rem 0 0; }
.title{ font-size:100%; }
.sub_c_title{ margin:0 0 2rem; }
.sub_title, .sub_title_r{
	font-weight:normal;
	font-size:1.4rem;
	color:#333333;
}
.sub_title_r{ text-align:right; }
.last_up_date{
	font-size:1.3rem;
	color:#595959;
}

/* -- 画像を並べるブロック -- */
.image_block{ margin:1rem 0 0; }

/* -- サンプル画像の縁取りとonMouseOverで色を薄く -- */
.sample_img{ border:solid 1px gainsboro; }
.sample_img:hover{ opacity:0.5;}


/* -- レスポンシブで狭くなった時に両サイドにスペース -- */
@media screen and (max-width:450px){
	.img_fit{ width:92%; }
}

/* -- 所有期間 -- */
.o_period{
	font-size:1.3rem;
	color:#666666;
	margin:0 auto;
	max-width:620px;
}

/* -- アンカーリンクの位置調整 -- */
.anchor{
	display:block;
	margin-top:-2rem;
	padding-top:2rem;
}

/* -- 検索結果の該当文字 -- */
.BINGO{
	font-weight:bold;
	color:orangered;
}

/* -- ------------------------------ -- */
/* -- works/以下 work.html 以外用の設定 -- */
/* -- ------------------------------ -- */

h2#work_title{ margin:2rem 0; }
h3.title{ font-size:105%; margin:1rem 0; }
.explanation{ margin:2rem 0; }
.block{ margin:1rem 0 2rem; }
.sup{
	font-size:1.3rem;
	color:#666666;
	margin:0 auto;
	max-width:620px;
}
label{
    display:block;
    position:relative;
    right:6rem;
    text-align:right;
	margin:0 0 1rem;
}

/* -- works/photo editing 写真の掛け合わせ -- */
.up_arrow{ display:none; }
@media screen and (max-width:620px){
	.×{ display:block; }
	.up_arrow{ display:block; }
}

/* -- --------------------------------- -- */
/* --　-- クリックで表示 / 非表示切り替え -- -- */

	/* -- コンテナ全体 -- */
	.container{
		text-align:center;
		margin:0 0 2rem;
		clear:both;
	}

	/* -- チェックボックスを非表示にする -- */
	.container input{ display:none; }

	/* -- 中身を非表示にしておく（後の２つは DB 用） -- */
	.container div.note,.photo-block,.rest_of_text{
		height:0;
		overflow-y:hidden;
		/* transition:3s; ゆっくり表示させる -- */
		opacity:0;
	}
	.photo-block-2{
		margin:1rem 0 0 40px !important;
		height:0;
		overflow-y:hidden;
		transition:3s; /* ゆっくり表示させる -- */
		opacity:0;
	}
	/* -- クリックで中身を表示 -- */
	.container input:checked + label + div{
		margin:1rem 0 0;
		padding:0 auto;
		height:auto;
		opacity:1;
	}

	/* ラベルテキストの先頭につけるアイコン */
	.container label::before{ content:'▶︎ '; }
	.container input:checked + label::before{ content:'▼ '; }

	/* ラベルもリンク文字扱いに */
	.container label{ color:dodgerblue; }
	.container label:hover{ color:orange; }
	.container label:active{ color:red; }

/* -- --------------------------------- -- */

/* -- ------------------------------------- -- */
/* -- 画像類の指定（スタンダード、ミドル、ラージ）  -- */

	/* -- -- -- スタンダードサイズ画像 -- -- -- */
	.img_std, .img_ots{
		width:280px;
		margin:0 0;
	}
	.img_std:hover{ opacity:0.8;}
	/* -- iphone6,7,8 以下対応 -- */

	/* -- -- -- ミドルサイズ画像 -- -- -- */
	.img_mdl{ width:498.5px; }
	.img_mdl:hover{ opacity:0.8;}

	/* -- -- -- 画像横並びで × を中段に -- -- -- */
	/*-- オンマウスオーバー時変化無し（非リンク） -- */
	.img_vam{ height:200px; vertical-align:middle; }

	/* -- -- -- 動画イメージ -- -- -- */
	.Movie_std, .Movie_lsav{
		width:280px;
		padding:3px 2px 1px;
	}
	.Movie_mdl, .Movie_lsav{
		width:480px;
		padding:3px 2px 1px;
	}
	.Movie_lsav:hover{ opacity:0.8;}


/* -- ------------------------------------- -- */


/* -- ------------------------------------- -- */
/* -- -- データベースからの出力ページの設定　-- -- */

	/* -- ３台の車アイコンのところ -- */
	#icons{ margin:5px 0; }
	.t_icon{
		vertical-align:-0.7rem;
		margin:1rem 1rem 0.5rem;
	}
	#this{ border-bottom:solid 2px gold; }
	.this{
		display:inline-block;
		padding:0 0.5rem;
		border:solid 1px gold;
		background:linear-gradient(transparent 85%, gold);
	}


	/* -- 表示スタイル指定プルダウン -- */
	.style_pull_down{ margin:1em 0; }
	.form select, .form button{
		color:black;
		background-color:#eeeeee;
		font-size:1.4rem;
		border:solid 1px #aaaaaa;
	}
	.form button{
		width:3rem;
		padding:2px 0 1px;
	}

	/* -- 表示ブロックナンバー -- */
	.info_n_link{
		font-size:1.4rem;
		font-weight:bold;
		margin-top:1.6rem;
	}

	#contents-area{
		text-align:left;
		max-width:960px;
		margin:1rem auto;
		border:solid 0px lightblue;
	}

	/* -- ------------------------- -- */
	/* -- 写真 + テキストのパターンの時 -- */

	h1.SbyS_main-title{
		position: static;
		font-size:2rem;
		clear:both;
		line-height:4rem;
		margin: 0 2rem 0 2rem;
		padding-left:2rem;
		color:#696969;
		border-bottom:solid 2px dodgerblue;
	}
	.SbyS_main-photo{
		float:left;
		height:200px;
		margin:0.5rem 2rem 0.5rem 50px;
	}
	.SbyS_main-date{
		text-align:right;
		font-size:1.4rem;
		color:gray;
		padding-right:50px;
		margin:0.5rem 0 0.8rem;
	}
	h2.SbyS_comment{
		font-weight:normal;
		font-size:1.6rem;
		text-align:left;
		line-height:3rem;
		padding:0 50px;
	}
	.rest_of_text{
		font-size:1.6rem;
		text-align:left;
		line-height:3rem;
		padding:0 55px 0 45px;
	}
	.photo-block-2{
		margin:0 0 0 40px;
		padding:0;
		text-align:center;
	}
	.SbyS_Movie{
		float:left;
		margin:0 2rem 0 50px;
		width:280px;
	}

	.photo{
		float:left;
		margin-left:10px;
	}
	.caption{
		width:280px;
		margin-top:-16px;
	}
	.caption p{
		width:270px;
		margin-left:5px;
		text-align:left;
		font-size:1.5rem;
		line-height:2rem;
	}

	/* -- ------------------------- -- */
	/* -- テキストのみのパターンの時 -- */

	h3.SbyS_title{
		font-size:1.7rem;
		line-height:3rem;
		max-width:650px;
		margin:0 auto;
		clear:both;
	}
	.SbyS_dates{
		font-size:1.4rem;
		color:dimgray;
		margin:-2.5rem 0 0 59%;
		white-space:nowrap;
	}


	/* -- ------------------------- -- */
	/* -- 写真のみ（S/L）パターンの時 -- */

	.image_list{
		display:inline-block;
		max-width:880px;
		margin:0 auto;
		padding:0 10px;
	}
	.SnL_title{
			font-size:1.7rem;
			line-height:3rem;
		}
	.SnL_body{
		text-align:left;
		padding-left:0.5rem;
	}


	/* -- 写真と説明横並びパターン -- */

	.i_n_t_container{
		display:flex;
		max-width:700px;
		margin:2em auto;
	}
	.i_n_t_container p{
		text-align:left;
		text-indent: -1.3em;
		margin:0 1em 0 2em;
	}
	.i_n_t_container p:first-letter{
		font-weight:bold;
	}

	/* -- ------------------------- -- */


/* -- ------------------------------------- -- */
/* -- -- デザインプリント費用関連ページの設定　-- -- */

.dp_explanation{
	text-align:left;
	max-width:700px;
	margin:0 auto 5rem;
}
.ex_comment{
	margin:2rem 0;
	padding:0 1rem;
	line-height:3rem;
}
#contents_index{
	margin:0 1rem 4rem;
	padding:1rem 1rem 1rem 2rem;
	font-weight:bold;
	line-height:3rem;
	background-color:aliceblue;
}
.topic_title{
	font-weight:bold;
	font-size:110%;
	margin:2rem 1rem;
	padding-left:1rem;
	border-bottom:solid 2px dodgerblue;
}
.topic_sub_title{
	font-weight:bold;
	margin:0 0 0.5rem 1rem;
	padding-left:1rem;
	clear:both;
}
.topic_note{
	font-size:105%;
	margin:0 0 1rem 1rem;
	padding:0 0.5rem 0 1rem;
	line-height:3rem;
}
.price{
	font-weight:bold;
	font-size:90%;
}
.to_shop{
	font-weight:bold;
	margin:0 0 0 1rem;
}
.addition{
	font-weight:normal;
	font-size:small;
	color:dimgray;
	margin:1rem 0 0 0;
}
.rice_mark{
	font-size:small;
	color:orangered;
 }
.notice{
	font-weight:normal;
	font-size:small;
	color:dimgray;
	margin:0.5rem 0;
	text-indent:-1.7rem;
	padding-left:1.7rem;
	line-height:2.2rem;
}
.center{
	text-align:center;
	margin:1rem 0;
}
.sample{　margin:0 auto 1rem;}
.sample_img_right{
	width:140px;
	float:right;
	margin:0.5rem 1rem;
	clear:both;
}

/* -- 表示 / 非表示切り替え -- */

	/*コンテナ全体*/
	.dp_container{
		margin:2rem 0 2rem 1.5rem;
		clear:both;
	}

	.dp_container label{ display:block; width:100%; }
	.dp_container .note_title{
		text-align:left;
		margin-left:3em;
		padding-left:1rem;
		border-bottom:solid 2px gainsboro;
	} 
	.dp_container .note{
		margin:0 2rem 2rem;
		line-height:3rem;
		padding:1rem 0 0;
		border-bottom:solid 2px gainsboro;
	} 
	.dp_container .note .note_sub_title{ margin:2rem 0 0; }

	/*チェックボックスを非表示にする*/
	.dp_container input{ display:none; }

	/*中身を非表示にしておく*/
	.dp_container div.note{
		height:0;
		overflow-y:hidden;
		transition:3s;/*ゆっくり表示させる*/
		opacity:0;
	}
	/*クリックで中身を表示*/
	.dp_container input:checked + label + div{
		height:auto;
		opacity:1;
	}

	/*ラベルテキストの先頭につけるアイコン*/
	.dp_container label::before{ content:'▶︎ '; }
	.dp_container input:checked + label::before{ content:'▼ '; }

	/*ラベルもリンク文字扱いに*/
	.dp_container label{ color:dodgerblue; }
	.dp_container label:hover{ color:orange; }
	.dp_container label:active{ color:red; }





/* -- ------------------------------------- -- */
/* -- -- レスポンシブデザインの設定　-- -- */

@media screen and (max-width:975px){

	.image_list, .photo-block-2{
		margin:0 auto !important;
		width:592px;
	}

}


@media screen and (max-width:650px){

	h3.SbyS_main-title{
		font-size:1.8rem;
		margin: 0 0.5rem;
		padding-left:0.5rem;
	}
	.SbyS_main-date{
		padding-right:2rem;
	}
	.SbyS_i_block{ text-align:center; }
	.SbyS_main-photo, .SbyS_Movie{
		float:none;
		margin:1rem auto 0.5rem auto;
	}
	h2.SbyS_comment{ padding:0 2rem 0 2.5rem; }
	.SbyS_comment,.rest_of_text{ padding:0 2rem; }
	label{ right:1rem; }
	h3.SbyS_title{
		max-width:40rem;
		padding-left:2rem;
	}
	.SbyS_dates{ display:none; }
	.image_list, .photo-block-2{ width:300px; }

	.i_n_t_container{
		display: block;
	}
	.i_n_t_container p{
		margin:0 1em 0 2em;
	}

}

@media screen and (max-width:414px){
	.img_mdl{ width:96%; }
	.Movie_mdl, .Movie_lsav{
		width:96%;
		padding:0;
	}
	h1.SbyS_main-title{
		font-size:1.7rem;
		margin: 0 0 0 0;
		padding-left:1rem;
	}
	.SbyS_main-date{
		text-align:center;
		padding-right:0;
	}
	h3.SbyS_title{ font-size:1.6rem; }
}