@charset "utf-8";

/* ========================================
枠組み CSS

 - File Name : structure.css
 - Latest Css Updates : 2015.3.11
 - Those who update it : y.e
 
 ------------------------------------------

======================================== */

/* ---------------------------------------- 
 - mainVisual 
---------------------------------------- */
/* #mainVisual */
#mainVisual{
	background:#fef1d0;
	/*background:linear-gradient(90deg,#f0f0f0 0%,#f0f0f0 50%,#ffffff 50%,#ffffff 100%);*/
	width:100%;
	text-align:center;
	margin:0 auto;
	position: relative;
}
#mainVisualCol{
	background:url("../images/mainvisual_img_pc.jpg") center center no-repeat;
	width:100%;
	height: 600px;
	margin:0 auto;
	text-align:center;
	position:relative;
}
#mainVisualCol .ttl{
	width:96%;
	max-width: 825px;
	padding:80px 0 0;
	margin:0 auto;
}
#mainVisualCol .txt{
	width:100%;
	position:absolute;
	bottom:70px;
	text-align:center;
	box-sizing:border-box;
	padding:20px 3%;
	font-size:18px;
	text-shadow:0 0 3px #fff, 0 0 5px #fff, 0 0 10px #fff;
}
#mainVisualCol .txt strong{
	font-size:24px;
	color:#fb6932;
	font-weight: bold;
}
#mainVisualCol .txt sup{
	font-size:12px !important;
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	#mainVisual{
		background:none;
		border-bottom:none;
	}
	#mainVisualCol{
		background:none;
		width:100%;
		height: auto;
		background-size:100%;
	}
	#mainVisualCol .ttl{
		width:85%;
		padding:0.5em 2%;
		margin:0 auto;
		position:absolute;
		top:5vw;
		left:0;
		right:0;
		box-sizing:border-box;
	}
	#mainVisualCol .txt{
		width:90%;
		top:50%;
		bottom:auto;
		left:50%;
		text-align:left;
		box-sizing:border-box;
		padding: 0;
		font-size:2.8vw;
		transform: translate(-50%,-50%);
		margin-top: 32vw;
	}
	#mainVisualCol .txt strong{
		font-size:4.1vw;
	}
}
@media screen and (max-width: 480px) {
}

/* ---------------------------------------- 
 - contents 
---------------------------------------- */
#contents {
	background:url("../images/contents_bg.png") top center repeat-x;
	padding:0 0 45px;
}
#contents #contentsCol {
	width:100%;
	padding:40px 0 0;
}
#contents #contentsCol section {
	width:1100px;
	margin:0 auto;
}
@media screen and (max-width: 767px) {
	#contents {
		padding:0 0 2.5em;
	}
	#contents #contentsCol {
		width:100%;
		padding:2.5em 0 0;
	}
	#contents #contentsCol section {
		width:96%;
	}
}

/* mainVisual-notice */
ul.mainVisual-notice{
	width:94%;
	max-width: 1100px;
	text-align: right;
	margin: 0 auto;
	font-size: 13px;
}
ul.mainVisual-notice li{
	text-indent: -1.0em;
	margin-left: 1.0em;
}
@media screen and (max-width: 767px) {
	ul.mainVisual-notice{
		text-align: left;
	}
}

/* contentsTitle */
#contents #contentsCol .contentsTitle {
    font-size: 30px;
    background: #fb6932;
    line-height: 1.4;
    width: 100%;
	max-width: 1100px;
    color: #fff;
    text-align: center;
	padding: 7px;
	box-sizing: border-box;
	margin: 0 auto 70px;
}
@media screen and (max-width: 767px) {
	#contents #contentsCol .contentsTitle {
		font-size: 20px;
		line-height: 1.6;
		max-width: 1100px;
		padding: 7px 5%;
		margin: 0 auto 50px;
	}
}
@media screen and (max-width: 480px) {
}

/* ---------------------------------------- 
 - #main
---------------------------------------- */
#contents #main {
}

/* btn */
#contents .btn a{
	display:inline-block;
	position:relative;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
	background:#f29720;
	font-size:15px;
	color:#fff;
	font-weight:bold;
	border:solid 3px #f29720;
	padding:10px 10px 8px;
	width:212px;
	-moz-box-shadow: 0 3px #cf7e15;
    -webkit-box-shadow: 0 3px #cf7e15;
    -o-box-shadow: 0 3px #cf7e15;
    -ms-box-shadow: 0 3px #cf7e15;
	text-decoration:none;
}
#contents .btn span.arw{
    display: inline-block;
    position: absolute;
	top:0;
	right:5%;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
	width:18px;
	height:25px;
}
#contents .btn span.arw::after{
    position: absolute;
    right: 0;
    bottom: -1px;
    border-right: 0.5em solid #f29720;
    border-bottom: 0.3em solid #fff;
    content: "";
}
#contents .btn.comingSoon{
	display:block;
	position:relative;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
	background:#fff;
	font-size:15px;
	color:#f29720;
	font-weight:bold;
	border:solid 3px #f29720;
	padding:10px 10px 8px;
	width:212px;
	text-decoration:none;
    
    cursor: default;
}
@media screen and (max-width: 767px) {
#contents .btn a{
	font-size:13px;
}
#contents .btn span.arw{
	width:18px;
	height:23px;
}
}

/* product */
#contents #product .productCol .phtbox {
	padding:0 35px 0 0;
}
#contents #product .productCol .phtbox p {
	width:270px;
}
#contents #product .productCol .txtbox > .ttl {
	position:relative;
	padding:5px 0 15px;
	width:386px;
}
#contents #product .productCol .txtbox > .ttl.ttl2 {
    width:247px;
	margin-top: 50px;
}
#contents #product .productCol .txtbox > .ttl .illust {
	width:99px;
	position:absolute;
	top:-30px;
	right:-106px;
}
#contents #product .productCol .txtbox .lead {
	/*border-bottom:solid 1px #bbb;*/
	padding:0 0 20px;
}
#contents #product .productCol .txtbox .btn a {
	width:350px;
	padding-right:30px;
}
#contents #product .productCol .txtbox .btn.comingSoon {
	width:350px;
}
/*#contents #product .productCol .txtbox .buy {
	padding:12px 0 0;
}
#contents #product .productCol .txtbox .buy dl dt {
	width:480px;
	padding:0 18px 0 0;
}
#contents #product .productCol .txtbox .buy dl dt .ttl {
	font-size:18px;
	font-weight:bold;
	color:#fb6932;
}
#contents #product .productCol .txtbox .buy dl dt ul.notes {
	font-size:12px;
	text-align:right;
}
#contents #product .productCol .txtbox .buy dl dd {
	width:297px;
	padding:15px 0 0;
}
#contents #product .productCol .txtbox .buy dl dd .btn a {
	width:295px;
	padding-right:30px;
}
#contents #product .productCol .txtbox .buy dl dt .txt {
	font-size:14px;
}
#contents #product .productCol .txtbox .buy dl dt .txt span {
	font-weight:bold;
	color:#fb6932;
}
#contents #product .productCol .txtbox .buy .detail {
	font-size:13px;
	padding:0 0 0;
}*/
#contents #product #productCol2 {
    margin: 40px 0;
}


@media screen and (max-width: 767px) {
#contents #product .productCol {
	display:block;
}
#contents #product .productCol .phtbox {
	padding:0 0 1.5em;
	margin:0 auto;
	text-align:center;
}
#contents #product .productCol .phtbox p {
	width:55%;
	max-width:270px;
	margin:0 auto;
}
#contents #product .productCol .txtbox {
	text-align:center;
}
#contents #product .productCol .txtbox > .ttl {
	padding:0 0 1.5em;
	width: 60%;
	max-width:386px;
	margin:10px auto 0;
}
#contents #product .productCol .txtbox > .ttl.ttl2 {
	padding:0 0 1.5em;
	width: 43.6%;
	max-width:280px;
	margin:10px auto 0;
}
#contents #product .productCol .txtbox > .ttl .illust {
	width:30%;
	max-width:75px;
	position: absolute;
	top:-20px;
	right:-30%;
}
#contents #product .productCol .txtbox .lead {
	/*border-bottom:solid 1px #bbb;*/
	padding:0 0 1.0em;
	text-align:left;
}
#contents #product .productCol .txtbox .btn a {
	width:80%;
	max-width:350px;
	margin:0 auto;
}
#contents #product .productCol .txtbox .btn.comingSoon {
	width:80%;
	max-width:350px;
    margin:0 auto;
}
/*#contents #product .productCol .txtbox .buy {
	padding:0.5em 0 0;
}
#contents #product .productCol .txtbox .buy dl {
	display:block;
}
#contents #product .productCol .txtbox .buy dl dt {
	width:100%;
	padding:0 0 0 0;
}
#contents #product .productCol .txtbox .buy dl dt ul.notes {
	font-size:12px;
	text-align:left;
}
#contents #product .productCol .txtbox .buy dl dd {
	width:75%;
	max-width:350px;
	padding:1.5em 0 1.5em;
	margin:0 auto;
}
#contents #product .productCol .txtbox .buy dl dd .btn a {
	width:100%;
}
#contents #product .productCol .txtbox .buy dl dt .ttl {
	font-size:16px;
}
#contents #product .productCol .txtbox .buy dl dt .txt {
	font-size:13px;
}
#contents #product .productCol .txtbox .buy .detail {
	font-size:12px;
	padding:0;
}
#contents #product .productCol .txtbox .buy .detail ul {
	font-size:11px;
	padding:0.5em 0 0;
}*/
#contents #product #productCol2 {
    margin: 40px 0;
}
}

/* topics */
#contents #topics {
	width:100% !important;
}
#contents #topics .topics_top {
	background-color:#ffe0d5;
	background:url("../images/topics_bg_01.png") center top repeat-x;
	width:100%;
	height:48px;
}
#contents #topics .wrapper {
	background-color: rgba(255,224,213,0.5);
	width:100%;
	padding:65px 0 35px;
}
#contents #topics .topics_bottom {
	background-color:#ffe0d5;
	background:url("../images/topics_bg_02.png") center top repeat-x;
	width:100%;
	height:48px;
}
#contents #topics #topicsCol {
	width:1100px;
	margin:0 auto;
}
#contents #topics #topicsCol > .ttl {
	position:relative;
	padding:0 0 35px;
	width:200px;
	margin:0 auto;
}
#contents #topics #topicsCol > .ttl .sub {
	padding:10px 0 0;
	margin:0 auto;
	text-align:center;
}
#contents #topics #topicsCol > .ttl .illust_01 {
	width:80px;
	position:absolute;
	top:-25px;
	left:-106px;
}
#contents #topics #topicsCol > .ttl .illust_02 {
	width:43px;
	position:absolute;
	top:-12px;
	right:-70px;
}
#contents #topics #topicsCol .topicsbox {
	overflow:hidden;
}
#contents #topics #topicsCol .fbbox {
	width:265px;
	margin:0 auto;
	box-sizing:border-box;
	float:left;
}
#contents #topics #topicsCol ul.newslist {
	width:835px;
	margin:0 auto;
	float:right;
}
#contents #topics #topicsCol ul.newslist li {
	width:263px;
	margin:0 0 15px 15px;
	padding:12px;
	background:#fff;
	box-sizing:border-box;
}
#contents #topics #topicsCol ul.newslist li a {
	text-decoration:none;
}
#contents #topics #topicsCol ul.newslist li a p {
	text-decoration:none;
}
#contents #topics #topicsCol ul.newslist li dl dt {
    width: 100%;
    overflow: hidden;
}
#contents #topics #topicsCol ul.newslist li dl dt img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#contents #topics #topicsCol ul.newslist li dl dt img:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

#contents #topics #topicsCol ul.newslist li dl dd {
	font-size:13px;
	padding:12px 0 0;
}
#contents #topics #topicsCol ul.newslist li dl dd .date {
	font-size:11px;
	float:left;
	padding:3px 0;
}
#contents #topics #topicsCol ul.newslist li dl dd .ico {
	font-size:11px;
	float:right;
	display:inline-block;
	background:#f4563c;
	color:#fff;
	padding:2px 10px;
	border-radius: 20px;
}
#contents #topics #topicsCol ul.newslist li dl dd .ico.news {
	background:#f4563c;
}
#contents #topics #topicsCol ul.newslist li dl dd .ico.magazine {
	background:#9061a1;
}
#contents #topics #topicsCol ul.newslist li dl dd .txt {
	clear:both;
	padding:5px 0;
	text-decoration:none;
}
#contents #topics #topicsCol .btn {
	width:212px;
	margin:0 auto;
	padding:25px 0 0;
}
@media screen and (max-width: 767px) {
#contents #topics {
	width:100% !important;
	padding:1.5em 0 0;
}
#contents #topics .topics_top {
	background-size:100%;
	height:10px;
}
#contents #topics .wrapper {
	padding:2.5em 0;
}
#contents #topics .topics_bottom {
	background-size:100%;
	height:10px;
}
#contents #topics #topicsCol {
	width:96%;
}
#contents #topics #topicsCol > .ttl {
	padding:0 0 1.5em;
	width:35%;
	max-width:200px;
}
#contents #topics #topicsCol > .ttl .sub {
	padding:0.3em 0 0;
	font-size:11px;
}
#contents #topics #topicsCol > .ttl .illust_01 {
	width:40%;
	max-width:80px;
	position:absolute;
	top:-15px;
	left:-48%;
}
#contents #topics #topicsCol > .ttl .illust_02 {
	width:25%;
	max-width:43px;
	position:absolute;
	top:-12px;
	right:-35%;
}
#contents #topics #topicsCol .fbbox {
	width:100%;
	float:none;
	margin:0 auto;
	padding:1.0em 0 0;
	text-align:center;
}
#contents #topics #topicsCol ul.newslist {
	width:100%;
	margin:0 auto;
	float:none;
}
#contents #topics #topicsCol ul.newslist li {
	width:48%;
	margin:0 1% 1.0em;
	padding:10px;
	background:#fff;
	box-sizing:border-box;
}
#contents #topics #topicsCol ul.newslist li dl dd {
	font-size:12px;
	padding:0.5em 0 0;
}
#contents #topics #topicsCol ul.newslist li dl dd .date {
	font-size:10px;
	float:left;
	padding:3px 0;
}
#contents #topics #topicsCol ul.newslist li dl dd .ico {
	font-size:10px;
	float:right;
	padding:2px 10px;
	border-radius: 20px;
}
#contents #topics #topicsCol .btn {
	width: 65%;
	max-width:212px;
	margin:0 auto;
	padding: 1.5em 0 1.5em;
}
}

/* linklist */
#contents #linklist {
	padding:45px 0 0;
}
#contents #linklist #linklistCol .linkbox {
	width:530px;
	position:relative;
}
#contents #linklist #linklistCol .linkbox .ttl {
	width:auto;
	position:absolute;
	top:30px;
	left:30px;
}
#contents #linklist #linklistCol .linkbox .txt {
	position:absolute;
	top:80px;
	left:30px;
}
#contents #linklist #linklistCol .linkbox .btn {
	position:absolute;
	bottom:30px;
	left:30px;
}
#contents #linklist #linklistCol .linkbox .btn a {
	padding-right: 20px;
}
#contents #linklist #linklistCol #faq {
	margin:0 40px 0 0;
}
#contents #linklist #linklistCol #faq .illust {
	position:absolute;
	bottom:-25px;
	right:0;
}
#contents #linklist #linklistCol #about .illust {
	position:absolute;
	top:-18px;
	right:0;
}
@media screen and (max-width: 767px) {
#contents #linklist {
	padding:2.5em 0 0;
}
#contents #linklist #linklistCol {
	display:block;
}
#contents #linklist #linklistCol .linkbox {
	width:90%;
	margin:0 auto;
}
#contents #linklist #linklistCol .linkbox .ttl {
	position:absolute;
	top:1.5em;
	left:7%;
	width:85%;
}
#contents #linklist #linklistCol .linkbox .txt {
	position:absolute;
	top:4.5em;
	left:7%;
	width:85%;
	font-size:12px;
}
#contents #linklist #linklistCol .linkbox .btn {
	position:absolute;
	bottom:1.0em;
	left:25%;
	width:55%;
}
#contents #linklist #linklistCol .linkbox .btn a {
	width:100%;
}
#contents #linklist #linklistCol #faq {
	margin:0 auto 2.5em;
}
#contents #linklist #linklistCol #faq .pht {
	padding:3.5em 0 0;
	background:#f1f1f1;
}
#contents #linklist #linklistCol #about .pht {
	padding:0 0 0;
	background:#26b4e7;
}
#contents #linklist #linklistCol #about .ttl {
	left:34%;
	width:32%;
}
#contents #linklist #linklistCol #faq .illust {
	position:absolute;
	bottom:0;
	right:-5%;
	width:20%;
}
#contents #linklist #linklistCol #about .illust {
	position:absolute;
	top:1.0em;
	right:-5%;
	width:25%;
}
}


/* bnrBox */
#contents #bnrBox {
	padding:30px 0 20px;
}
#contents #bnrBox #bnrBoxCol {
}
#contents #bnrBox #bnrBoxCol .bnr{
	margin:0 0 0 auto;
	width:50%;
	max-width:331px;
}
#contents #bnrBox #bnrBoxCol .bnr a{
	width:100%;
	display:block;
	box-sizing:border-box;
}
#contents #bnrBox #bnrBoxCol .bnr a img{
	border:solid 3px #fcb0a3;
}
@media screen and (max-width: 767px) {
#contents #bnrBox {
	padding:2.5em 0 0;
}
#contents #bnrBox #bnrBoxCol {
}
#contents #bnrBox #bnrBoxCol .bnr{
	margin:0 auto;
	width:50%;
	max-width:331px;
}
#contents #bnrBox #bnrBoxCol .bnr a{
	width:100%;
	display:block;
	box-sizing:border-box;
}
}