@charset "utf-8";

/* cssリセット
-------------------------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
main, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-feature-settings: "palt";
}

article, aside, dialog, figure, footer, header,
main, nav, section {
	display: block;
}

nav ul { list-style: none; }

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	font-family: "Arial","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3",メイリオ,Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 62.5%;
	line-height: 1.65;
	background-color: #dedede;
}

body {
	text-align: left;
	font-size: 1.4rem;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

i { margin-right: 0.3em;} 

li { list-style-type: none; }

.disc { 
margin-left: 2em;	
padding-left: 1em;
		text-indent: -2em;
}

.disc li {
	list-style-type: disc;
	list-style-position: inside;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix { height: 1%; }

.clearfix { display: block; }

* html ul li { display: inline-block; }

h2 {
	padding: 0;
	margin: 0;
}



/* 見出し初期設定
-------------------------------------------------------------------------------- */

h2{
	display: block;
	font-weight: bold;
	font-size: 1.7rem;
	padding: 0.5rem 1rem;
	background-color: #eee;
	margin-bottom: 0.5rem;
	text-align: center;
	font-feature-settings: "palt";
	letter-spacing: .1em;
}


/* align, float, margin, padding 調整
-------------------------------------------------------------------------------- */

.left { float: left; }
.right { float: right; }

.aligncenter { text-align: center; }
.alignleft{ text-align: left; }
.alignright{ text-align: left; }

.mt2  { margin-top:  0.2rem; }
.mt5  { margin-top:  0.5rem; }
.mt8  { margin-top:  0.8rem; }
.mt10 { margin-top:  1.0rem; }
.mt15 { margin-top:  1.5rem; }
.mt20 { margin-top:  2.0rem; }
.mt25 { margin-top:  2.5rem; }
.mt30 { margin-top:  3.0rem; }
.mt35 { margin-top:  3.5rem; }
.mt40 { margin-top:  4.0rem; }
.mt50 { margin-top:  5.0rem; }
.mt60 { margin-top:  6.0rem; }
.pt2  { padding-top: 0.2rem; }
.pt5  { padding-top: 0.5rem; }
.pt8  { padding-top: 0.8rem; }
.pt10 { padding-top: 1.0rem; }
.pt13 { padding-top: 1.3rem; }
.pt15 { padding-top: 1.5rem; }
.pt20 { padding-top: 2.0rem; }
.pt25 { padding-top: 2.5rem; }
.pt30 { padding-top: 3.0rem; }
.pt35 { padding-top: 3.5rem; }
.pt40 { padding-top: 4.0rem; }
.mb10  { margin-bottom:  1.0rem; }
.mb20  { margin-bottom:  2.0rem; }
.ml10 { margin-left: 1rem; }
.ml20 { margin-left: 2rem; }
.ml30 { margin-left: 3rem; }

.pl10 { padding-left: 1rem; }
.pr10 { padding-right: 1rem; }
.pl20 { padding-left: 3rem; }
.pr20 { padding-right: 3rem; }
.pl30 { padding-left: 3rem; }
.pr30 { padding-right: 3rem; }


/* 基本レイアウト
-------------------------------------------------------------------------------- */

.mobiledisplay {
		display: none;
}

#base {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	position: relative;
}

.wrap {
	width: 100%;
	max-width: 860px;
	min-width: 320px;
	margin: 0 auto;
	position: relative;
}

.wrap img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.inner {
	padding: 0 2rem;
	text-align: center;
}

.container {
	padding-top: 106px;
	padding-bottom: 20px;
	background-color: #fff;
}


/* 基本レイアウト -- ヘッダ
-------------------------------------------------------------------------------- */

header {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}

header .inner {
	background-color: #fff;
}

header h1 {
	float: left;
	padding: 1rem 0;
	font-weight: normal;
	color: #666;
}

header h1 a {
	color: #666;
	text-decoration: none;
	border: none;
}

header p {
	float: right;
	padding: 1rem 0;
}

/* 基本レイアウト -- ナビゲーション
-------------------------------------------------------------------------------- */
nav .wrap {
	background-color: #fff;
}

nav .nav-inner {
	max-width: 820px;
	margin: 0 auto;
	border: solid #fff;
	border-width: 2px 0;
	background-color: #fff;
}

nav li {
/*	width: 16.66%;			//ヘッダーのナビを増やした 2018 */
	width: 14.28%;
	float: left;
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
}

.double{				/* ヘッダーのナビを増やした 2018 */
/*	width: 16.66%; 			*/
	font-size: 1.2rem;
	line-height:1.1
}

nav li a {
	border-right: solid 2px #fff;
	background-color: #E9537C;
	display: block;
	padding: .8rem 0;
	color: #fff;

}

nav li a:hover {
	background-color: #f3c4d1;
	color:#fff;
}

nav li:last-child a {
	border-right: 0;
}


/* 基本レイアウト -- メインコンテンツ -- メインヴィジュアル・リード文
-------------------------------------------------------------------------------- */

#main {
	text-align: center;
}

#main img {
	width: 100%;
}

.lead {
	font-size: 1.5rem;
}

.lead h2 {
	color: #0093d7;
	background-color: #fff;
}

.lead h3 {
	padding: .3rem 0;
	font-size: 1.7rem;
	color: #fff;
	background-color: #777676;
	text-align: center;
}

.lead h4 {
	padding: .3rem 0;
	font-size: 1.7rem;
	color: #fff;
	background-color: #777777;
	text-align: center;
}

/* 基本レイアウト -- メインコンテンツ -- ソーシャルアイコン
-------------------------------------------------------------------------------- */

#social-icon { margin-bottom: 0.5rem; margin-top:1rem; }

#social-icon li {
	float: right;
	margin-left: 15px;
	margin-bottom: 1rem;
	line-height: 1;
}

/* 基本レイアウト -- メインコンテンツ -- テーブル
-------------------------------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border-bottom: solid 2px #777777;
}

table th,
table td {
	padding: 2rem;
	border-top: solid 2px #777777;
	text-align: left;
	vertical-align: top;
	font-feature-settings: "palt";
}

table th {
	width: 20%;
	padding: 2rem 2rem 2rem 1rem;
	background-color: #eee;

}

/* 基本レイアウト -- section, article
-------------------------------------------------------------------------------- */

section {
}

article  {
	text-align: left;
}

/* 基本レイアウト -- フッタ
-------------------------------------------------------------------------------- */

.page-top { }

footer {
	padding-top: 3rem;
	padding: 2rem 0;
	background-color: #666;
	text-align: center;
	color: #fff;
}

/* カラー設定
-------------------------------------------------------*/

a {
	color: #d6325f;
	text-decoration: none;
}

a:hover {
	color: #E9537C;
	text-decoration: underline;
}

/* ナビゲーションの色
-------------------------------------------------------*/

nav li a {
	border-right: solid 2px #fff;
	background-color: #E9537C;
	color: #fff;
}

nav li a:hover {
	background-color: #f3c4d1;
	color:#fff;
}

/* テキスト装飾  
-------------------------------------------------------*/
.bold { font-weight: bold; }

.sizedowntext { font-size: 0.9em; }
.smalltext { font-size: 0.9rem; }
.bigtext { font-size: 1.6rem; }

.redText { color: red; }
.goldText { color: #ae9e6c; }
.silverText { color: #888; }
.blonzText { color: #75552d; }

.marker_pink_thin { background: linear-gradient(transparent 70%, #F6CECE 60%); }  /* マーカー風装飾 */
.marker_green_thin { background: linear-gradient(transparent 90%, #bce1df 60%); }  /* マーカー風装飾 */
.marker_silver_thin { background: linear-gradient(transparent 75%, #eee 60%); }  /* マーカー風装飾 */
.marker_yellow_thin {　background: linear-gradient(transparent 60%, #fffc92 60%);}


/* ボタン
-------------------------------------------------------*/

.btn a {
	padding: 1rem;
	color: #fff;
	font-weight: bold;
	border-radius: 0.1rem;
	background-color:  #E9537C;
	position: relative;
	display: inline-block;
	text-decoration: none;
	margin-top: -1em;
	margin-bottom: -0.5em;
}

.btn a:hover {
	color: #fff;
	font-weight: bold;
	background-color: #f3c4d1;
}

.big a {
	padding: 2rem;
	font-size: 2rem;
	border-radius: 0.5rem;
}

.btn2 a {
	padding: 1rem;
	color: #fff;
	font-weight: bold;
	border-radius: 0.1rem;
	background-color:  #0093d7;
}

.btn2 a:hover {
	color: #fff;
	font-weight: bold;
	background-color: #00aeff;
}

/* ほか装飾
-------------------------------------------------------*/

ul#info {
	text-align: left;	/* 20220516 追加 */
	padding-bottom: 1em;
}

ul#info li{
	padding-bottom: 0;
	padding-left: 1em;
}


ul.check, ol.check, ul.check_red, ul.check_heart, dl.check_heart, ul.check_trophy{
	padding-left: 2em;
}

ul.check li, ol.check li, ul.check_red li, ul.check_heart li, ul.check_heart, ul.check_trophy li{
	line-height: 1.5;
	padding-bottom: 0.5em;
	list-style-type: none!important;
  	text-indent: -1em;
}

dl.check_heart dt{
	line-height: 1.5;
	list-style-type: none!important;
  	text-indent: -1em;
}

ul.check li:before, ol.check li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f078";
	color: #999999;   /*アイコン色*/
	position: relative;
	left: -1em;
}

ul.check_red li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f192";
	color: #E9537C; /*アイコン色*/
	position: relative;
	left: -1em;
}

ul.check_heart li:before, dl.check_heart dt:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f004";
	color: #E9537C; /*アイコン色*/
	position: relative;
	left: -1em;
}

ul.check_trophy li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f091";
	color: #E9537C; /*アイコン色*/
	position: relative;
	left: -1em;
}

dl.check_heart dd {
	padding-bottom: 0.2em;
	padding-left: 1em;
}

/* 注意事項列記リスト、ピンクの枠 */
ul.caution, dl.caution, .pinkblock{
	font-color: #999;
	border: 1px dashed #E9537C;
	border-radius: 6px;
	background-color: #fEE;
	margin: 0.5em 0;
	padding: 1em 1em;
}

dl.caution dt {
		font-weight: bold;
		padding: -0.5em 0;
}

ul.caution li, dl.caution dd {
	line-height: 1.4;
	display: list-item;
	list-style-type : disc;
	padding: 0.5em 0;
	margin: 0 1em;
  	list-style-position: outside;
}


/* QA列記リスト */

dl.QandA{
	font-color: #999;
	padding: 0.5em 0;
}

dl.QandA dt {
		font-weight: bold;
		padding: -0.5em 0;
}

dl.QandA dt:before {
	content: "Q.";
	font-weight: bold;
}

dl.QandA dd {
	line-height: 1.4;
	display: list-item;
	padding-top: 0.5em;
	margin: 0 1em;
	list-style-type: none!important;
	padding-bottom: 1em;
}

dl.QandA dd:before {
	content: "A.";
	font-weight: bold;
}

/* 順序箇条書きポイント定義リスト
----------------------------------------------- */

ul.point li{
	position: relative;
	padding-left: 3rem;
	text-indent: 0rem;
}

ul.point li:before {/*疑似要素*/
	content: "\30FB";
	color: #333; /*アイコン色*/
	font-size: 2rem;
	font-weight: bold;
	position: absolute;	
	margin-top: -0.5rem;
	left: 1rem;
}

/* 注釈の定義リスト
----------------------------------------------- */
dl dd.caution:before {/*疑似要素*/
	content: "*";
	position: absolute;
	font-size: 1.75rem;
	left: 1.7rem;
	margin-top: 0.05rem;
}

/* リストスタイル不要な定義
----------------------------------------------- */
dl dd.no-list {
	margin-left: -1.5rem;
}

dl dd.no-list:before {/*疑似要素*/
	content: "  ";
	left: 1em;
}

/* 定義リスト内の ul
----------------------------------------------- */
dl dd ul li {
	margin-left: 1rem;
}

dl dd li:before {/*疑似要素*/
	content: "-";
	position: absolute;
	left: 3rem;
}

/* 注意事項列記時に使うリスト
----------------------------------------------- */
ul.caution_noborder{
	font-size: 0.9em;
	list-style-type: none!important;
}

ul.caution_noborder li{
	line-height: 1.5;
	padding-bottom: 0.6em;
	position: relative;
	list-style-type: none!important;
	padding-left: 1em;
}

ul.caution_noborder li:before {
	position: absolute;
	display: inline;
	content: "*";	
	left: -0.02em;
}

/* 画像・キャプションを並べた定義リスト1 - 画像とキャプションを横並びにする
----------------------------------------------- */

dl.image-text {
	list-style-type: none!important;
	margin:auto;
	display: block;
	clear:both;
}

dl.image-txt dt{
	list-style-type: none!important;
	margin-bottom: 1rem;
	text-align: left;
	font-weight:bold;
	display: block;
	clear:both;
}

dl.image-txt dd{
	vertical-align: top;
	text-align: left;
	box-sizing: border-box;
	margin-bottom: 1rem;
	padding: 1%;
	display: inline-block;
	float: left;
}

dl.image-txt dd.img{
	width: 36%;
}

dl.image-txt dd.txt{
	width: 60%;
	border: 1px dashed #E9537C;
	border-radius: 6px;
	padding: 2%;
	float: right;
}

dl.image-txt dd.txt p{
	margin: 0;
	padding: 0;
}

dl.image-txt dd.txt2{
	width: 60%;
	border: 1px dashed #019FE8;
	border-radius: 6px;
	padding: 2%;
	float: right;
}

dl.image-txt dd.txt2 p{
	margin: 0;
	padding: 0;
}


/* box装飾
----------------------------------------------- */

.result_box{
	padding: 1%;
}

/* 見出し装飾
----------------------------------------------- */
.subtitle_01 {
	margin: 1.5rem 0 2rem 0;
	padding: 2rem 0.5rem;
	font-size: 3rem;
	text-align: center;
	border: solid .3rem #bfbfbf;
	color: #9aa5ab;
	background-color: #fff
}

.subtitle_02 {
	margin: 4rem 0 2rem 0;
	padding: 0.5rem 1rem;
	border-left: solid 1rem #E9537C;
	border-bottom: solid 1px #999;
	background-color: #fff
	text-align: left;
}

.subtitle_03 {
	margin: 4rem 0 2rem 0;
	margin-top: 5rem;
	padding: 0.5rem 1rem;
	border-left: solid 1rem #019FE8;
	border-bottom: solid 1px #999;
	background-color: #fff
	text-align: left;
}

.subtitle_04 {
	margin: 4rem 0 1rem 0;
	padding: 0.2rem 1rem;
	color: #000;
	font-weight: bold;
	border-radius: 0.2rem;
	border: solid 1px #bfbfbf;
	background-color: #ebe8e2;
}


/* 線
----------------------------------------------- */

hr {
height: 1px;
border: none;
border-top: 1px #ccc dashed;
}

/* レスポンシブル対応
----------------------------------------------- */

@media screen and (min-width: 540px) and (max-width: 720px) {
	nav li{
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 540px) {
	.wrap {
		font-size: 1.2rem;
	}

	table th {
		width: 25%;
	}
	.container {
		padding-top: 126px;
	}

	.inner {
		padding: 0 1rem;
	}
	header h1 {
		float: none;
		padding: 1rem 0;
		text-align: center;
		font-weight: normal;
		font-size: 1.4rem;
	}

	header h1 span {
		display: none;
	}
	header p {
		display: none;
	}
	nav li {
		width: 33.33%;
		font-weight: bold;
		font-size: 1.4rem;
	}
	nav li a {
		display: block;
		padding: .5rem 0;
		border-bottom: solid 1px #fff;
	}
	nav li:nth-child(3) a {
		border-right: 0;
	}

	nav li:nth-child(4) a,
	nav li:nth-child(5) a,
	nav li:nth-child(6) a {
		border-bottom: 0;
	}

	.lead {
		font-size: 1.3rem;
	}

	.lead h2 {
		font-size: 1.3rem;
	}

	.pcdisplay {
		display: none;
	}

	.mobiledisplay {
			display: block;
	}

	dl.image-txt {
		text-align: center;
	}

	dl.image-txt dd.img{
		width: 80%;
		margin: auto;
		margin-bottom: 1rem;
		clear: both;
		float: none;
	}

	dl.image-txt dd.txt{
		width: 90%;
		margin: auto;
		clear: both;
		float: none;
	}

	.result_box{
		width: 90%;
		margin: auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		clear: both;
		float: none;
	}

}

/* 写真回り込みテキスト
--------------------------------------------------*/
div.comment {
width: 100%;
margin-bottom: 3em;
}

img.coment_right {
float: left;
margin-right: 1em;
}

img.coment_left { float: right; }

.clearRight { clear: left; }
.clearLeft { clear: right; }