@charset "UTF-8";
/**
 :一行説明 "「コンテンツ名」 スタイル設定";
 :作成日 "2013-XX-XX";
*/

/* --------------------------------
   全体レイアウト（支援コンテンツ 共通）
-------------------------------- */
body{overflow-x: hidden;}
body a {
	text-decoration:none !important;
}
#main{
	font-size: 75%;
	line-height: 1.5;
}
#main img,#main input{
	vertical-align: bottom;
}


/* --------------------------------
   支援コンテンツ 共通パーツ
-------------------------------- */

#main p.toPageTop{
	margin-top: 2em;
	padding-bottom: 1em;
	padding-top: 1em;
	clear: both;
	text-align: right;
}
#main div.section p.toPageTop{
	margin-bottom: 2em;
}
#main p.toPageTop a{
	background: url(../../images/share/icon12.gif) no-repeat right center;
	padding-right: 16px;
}
#main p.toPageTop a.toCatTop{
	background: url(../../images/share/icon05.gif) no-repeat right center;
}


/* ↓ここから各コンテンツ用スタイル
   --------------------------------------------- */

span.amazonfont01 { font-family: "Verdana"; font-size: 22px; font-weight: normal;}
span.amazonfont02 { font-family: "ＭＳ Ｐゴシック", "MS PGothic"; font-size: 22px; font-weight: normal;}
.red { color: #f00;}
p.attn { font-size: 10px !important; margin-top: 10px;}
.box {
	/* width: 96%; */
    height: 340px;
    margin: 20px 10px;
    background: #f0f0f0;}
.box2{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
}
iframe{
    position:absolute;
    top: 20px;
    left: 25px;
    width: 95%;
    height: 300px;
}

#content {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	font-family: -apple-system, Helvetica, "游ゴシック Medium", YuGothic, "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

#content div.wrapper { padding: 0 2%;}
#content img.itemImg { width: 70%; margin: 0 15%;}
#content img.itemImg.glaph { width: 90%; margin: 15px auto; display: block;}
#content img.mainImg { width: 100%;}
#content img.sp {display: none;}
#content .ttl_h2 { text-align: center;}
#content h2 { text-align: center; padding: 35px 0; font-size: 24px;}
#content h3 { padding-left: 46px; color: #FFF; height: 40px; line-height:40px; background-position: 6px; font-size: 14px;}
#content h4 { padding: 5px; font-size: 14px; line-height: 1.6;}
#content h4.gift_txt { width: 22em; text-align: center; color: #ff5252; margin: 30px auto 0; font-size: 18px;}
#content h4.gift_txt span { font-size: 22px;}
#content li { font-size:12px; padding-left:1em; text-indent: -2em;}
#content dd { font-size:12px; padding-left:1em;}
/*#content p { padding: 5px;}*/

#content div.clm-1 { clear:both; overflow: hidden; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; margin: 40px 0;}
#content div.clm-2 { width: 423px; height: 460px; float: left;overflow: hidden; border-left: 1px solid #ddd;}
#content div.clm2-last { margin-right: 0; border-right: 1px solid #ddd; }
#content div.clm-3 { width: 281.5px; height: 300px; float: left; overflow: hidden; border-left: 1px solid #ddd;}
#content div.clm3-last { margin-right: 0; border-right: 1px solid #ddd; }
#content div.clm-1 p , #content div.clm-2 p , #content div.clm-3 p , #content div.clm-last p { padding: 5px;}
.gift { background: #f2f2f2; padding: 0 0 1% 0;}
.gift p { text-align: center; padding: 63px 0 73px 5px; font-size: 20px; font-weight: bold; line-height: 1.5em;}
.flow_txt { margin: 15px 0 10px;}
#flow { clear: both;}
.flow , p.btn { text-align: center;}
.flow , p.btn2 { text-align: center;}
.flow a , p.btn a { display: inline-block; margin-bottom:9px; text-align: center; background: #f67e28; color: #fff; text-decoration: none; border-radius: 8px; line-height: 46px; font-size: 16px; font-weight: bold; width: 189px;}
.flow a , p.btn2 a { display: inline-block;  margin: 3% 0; text-align: center; background: #f67e28; color: #fff; text-decoration: none; border-radius: 4px; width: 590px; height: 56px; line-height: 56px; font-size: 16px; font-weight: bold;}
p.btn2 a.no_btn { background: #CCC;}
p.btn a.no_btn { background: #CCC;}
.wrap { margin: 20px 0; position: relative;}
.pmark img { width: 70px !important; float: right; position: absolute; bottom: -13px; right: 0; margin:0 !important;}
.wrap p {line-height: 1.7; margin-bottom: 20px;}
.gift { background: url(../img/card-bk.png) no-repeat; background-size: 77%; height: auto; width: 90%; margin: 0 auto; background-position-x: center;}
.calendaricon { background: url(../img/icon_calendar.gif) no-repeat left #0288D1;}
.gifticon { background: url(../img/icon_gift.gif) no-repeat left #0288D1;}
.checkicon { background: url(../img/icon_check.gif) no-repeat left #0288D1;}
.listicon { background: url(../img/icon_list.gif) no-repeat left #0288D1;}

#content div.clm_box {
    text-align: unset;
    width: 95%;
    height: auto;
	padding: 10px;
}
/* --------------------------------
   印刷用（支援コンテンツ 共通）
-------------------------------- */
@media print{
	html,body{
		background:#FFF;
	}
	#header,#footer,#secondary,#topicpathArea{
		display:none;
	}
	#main{
		padding: 0;
	}
	#primary{
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (min-width:1000px){
#content{
width: 850px;
}
}
@media screen and (max-width: 768px) {
  #main {
    width: auto;
    padding: 0 0px 1px;
}
	#content{width:98%;
	max-width:98%;
	}
  #content img.pc{display: none;}
  #content img.sp{display: block;}
}

@media screen and (max-width: 862px) {
	body {
    -webkit-text-size-adjust: none;
    color: #333;
    min-width: 447px;
}
	#main {
    width: auto;
    padding: 0 0px 1px;
}
	#content{
  width:98%;
	max-width:98%;
  margin: 0 auto;
	}

	#content h2 {
    text-align: center;
	width: 70%;
	padding: 1% 0;
    font-size: 24px;
	margin-top: 15px;
}

#content h3 {
	width:100%;
    padding-left: 46px;
    color: #FFF;
    height: 40px;
    line-height: 40px;
    background-position: 6px;
    font-size: 14px;
}

#content h4.gift_txt {
    width: 100%;
    margin: auto auto;
    font-size: 18px;
}
#content div.clm-1 {
    width: 98%;
    height: auto;
    float: left;
    overflow: hidden;
	border-left: 1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin:1%;
}

#content div.clm-2 {
    width: 98%;
    height: auto;
    float: left;
    overflow: hidden;
	border-left: 1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin:1%;
}


#content div.clm-2 img{
    margin-left: 25%;
    width: 75%;
	max-width:350px;
    }

#content div.clm-3 {
    width: 98%;
    height: auto;
    float: left;
    overflow: hidden;
	border-left: 1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin:1%;
}
#content div.clm_box {
    text-align: unset;
    width: 95%;
    height: auto;
	padding: 10px;
}
#content dd {
	width:98%;
    font-size: 12px;
    padding-left: 1em;
}
.flow , p.btn2 { width: 100%;
text-align: center;
}

.gift {
    background: url(../img/card-bk.png) no-repeat;
    background-size: 100% 75%;
	background-position:center;
    width: 100%;
    margin: 1%;
	}

.gift p {
    text-align: center;
    font-size: 140%;
    font-weight: bold;
}
.flow a, p.btn2 a {
    display: inline-block;
    margin: 3%;
    text-align: center;
    border-radius: 4px;
    width: 80%;
    line-height: 56px;
}
iframe {
	width: 90%;
	height: 300px;
/*	margin: 20px 10px;*/
	border: none;
}

.box{
	/* width: 100%; */
    height: 300px;
    overflow: auto;
	-webkit-overflow-scrolling:touch;
}

}

@media screen and (max-width: 581px) {
	dl, dt{width:94%}
	#content h2 {
    text-align: center;
	width: 100%;
	padding: 1%;
    font-size: 122%;
	margin-top: 15px;
}
	.gift p {
    text-align: center;
    width: 85%;
    font-size: 107%;
    font-weight: bold;
    margin: 0 auto;
    padding-right: 27px;
    padding-top: 80px;
}

#content div.clm-2 img{
    margin-left: 15%;
	max-width:350px;
    }

span.amazonfont01 { font-family: "Verdana"; font-size: 130%; font-weight: normal;}
span.amazonfont02 { font-family: "ＭＳ Ｐゴシック", "MS PGothic"; font-size: 130%; font-weight: normal;}

	}


@media screen and (min-width: 800px) {
}