@charset "utf-8";

/*=============================================
	
	タイトル
	
==============================================*/
@media print, screen and (max-width: 768px) {
	#title_wrap {
		padding: 6.4em 0  !important;
	}
	#title_wrap h2 {
		width: 50%;
		margin: 0 auto;
	}
}

@media print, screen and (min-width: 769px) {
	#title_wrap {
		padding: 6.4em 0  !important;
	}
	#title_wrap h2 {
		width: 20%;
		margin: 0 auto;
	}
}

/*=============================================
	
	上部リード
	
==============================================*/
@media print, screen and (max-width: 768px) {
	.top_lead{
		margin: 0 0 1.6em;
	}
	.top_lead h3 {
		margin: 0 0 1.6em;
	}
	.top_lead p.text {
		margin: 0 0 1.6em;
	}
	.top_lead .img_top {
	}
}

@media print, screen and (min-width: 769px) {
	.top_lead{
		margin: 0 0 1.6em;
	}
	.top_lead h3 {
		margin: 0 0 1.6em;
	}
	.top_lead p.text {
		margin: 0 0 1.6em;
		text-align: center;
	}
	.top_lead .img_top {
	}
}


/*=============================================
	
	記事のレイアウト 
	
==============================================*/
@media print, screen and (max-width: 768px) {
	.style_wrap {
		padding: 5.6em 0 3.2em;
	}
	.style_wrap:nth-of-type(even) {
		background: #f2f5f8;
	}
	.style_wrap dl.headline {
	}
	.style_wrap dl.headline dt{
		margin: 0 0 1.6em;
	}
	.style_wrap dl.headline dt h5{
		font-size: 115%;
	}
	.style_wrap dl.headline dt p.number{
		position: relative;
		text-align: center;
		font-size: 3.0em;
		padding: 0.5em 0;
		margin: 0 0 2.0em;
		color: #b7a26d;
	}
	.style_wrap dl.headline dt p.number:before{
		content: "";
		width: 20%;
		height: 1px;
		background: #b7a26d;
        -webkit-transform:
            rotate(-45deg);
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -18%;
	}
	.style_wrap dl.headline dt p.number:after{
		content: "";
		width: 20%;
		height: 1px;
		background: #b7a26d;
        -webkit-transform:
            rotate(-45deg);
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -2%;
	}
	.style_wrap dl.headline dd {
		margin: 0 0 2.4em;
	}
	
	.style_wrap h6 {
		margin: 0 0 1.2em;
	}
	.style_wrap p.text_body {
		width: 80%;
		line-height: 2.0em;
		margin: 0 auto 2.0em;
	}
}
	
@media print, screen and (min-width: 769px) {
	.style_wrap {
		padding: 60px 0;
	}
	.style_wrap dl.headline {
		width: 100%;
		margin: 0 0 30px;
	}
	.style_wrap dl.headline dt{
		margin: 0 0 20px;
	}
	.style_wrap dl.headline dt p.number{
		position: relative;
		text-align: center;
		font-size: 3.0em;
		padding: 0.5em 0;
		margin: 0 0 2.0em;
		color: #b7a26d;
	}
	.style_wrap dl.headline dt p.number:before{
		content: "";
		width: 80px;
		height: 1px;
		background: #b7a26d;
        -webkit-transform:
            rotate(-45deg);
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -80px;
	}
	.style_wrap dl.headline dt p.number:after{
		content: "";
		width: 80px;
		height: 1px;
		background: #b7a26d;
        -webkit-transform:
            rotate(-45deg);
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: 0;
	}
	.style_wrap dl.headline .short_border {
		margin: 1.8em auto;
	}
	.style_wrap dl.headline dd {
		width: 800px;
		margin: 0 auto 0;
	}
	.style_wrap dl.headline dd .bg_img {
		padding-top: 56.25%;
		margin: 0 0 1.0em;
	}
	.style_wrap p.text_body {
		width: 720px;
		line-height: 2.2em;
		margin: 0 auto 30px;
	}

}


/** アコーディオン **************/
@media print, screen and (max-width: 768px) {
	dl.accordion {
		width: 80%;
		margin: 0 auto;
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		color: #666;
	}
	dl.accordion dt {
		text-align: left;
		font-size: 105%;
		padding: 1.4em 1.4em 1.4em 1.2em;
		line-height: 2.0em;
	}
	dl.accordion dt.arrow_below:after {
		right: 2%;
	}
	dl.accordion dd {
		display: none;
		padding: 1.6em 0 1.6em;
		line-height: 2.2em;		
	}
	dl.accordion dd h5 {
		margin: 0 0 1.6em;
	}
	dl.accordion dd .point_detail li {
		margin: 0 0 2.0em;
	}
	dl.accordion dd .point_detail li .bg_img {
		margin: 0 0 0.8em;
	}
	
	/** 枠あり **************/
	div.pinterrest {
		width: 80%;
		margin: 0 auto 2.4em;
	}
	div.example {
		width: 70%;
		border: 3px solid #99c2cd;
		padding: 2.0em 5%;
		margin: 0 auto;
	}
	div.example ul.list {
		margin: 0 0 1.6em;
	}
	div.example ul.list li {
		margin: 0 0 1.2em;
		position: relative;
		padding: 0 0 0 15px;
	}	
	div.example ul.list li:before {
		position: absolute;
		left: 0;
		top: 6px;
		content: "";
		width: 6px;
		height: 6px;
		border: 2px solid #99c2cd;
		-webkit-border-radius: 50%;/* 50%でもOK */
		-moz-border-radius: 50%;
		border-radius: 50%;
	}	
	div.example dl.two dt {
		margin: 0 0 1.6em;
	}
	div.example dl.two dd {
		line-height: 2.0em;
	}
	
	
	#article01 .imgsizemain {
		padding-top: 75%;
	}
	#article01 .imgsize01 {
		padding-top: 65%;
	}
	#article01 .imgsize02 {
		padding-top: 65%;
	}
	#article01 .imgsize03 {
		padding-top: 65%;
	}
	#article01 .imgsize04 {
		padding-top: 65%;
	}

	#article02 .imgsizemain {
		padding-top: 75%;
	}
	#article02 .imgsize01 {
		padding-top: 75%;
	}
	#article02 .imgsize02 {
		padding-top: 75%;
	}
	#article02 .imgsize03 {
		padding-top: 75%;
	}
	#article02 .imgsize04 {
		padding-top: 120%;
	}

	#article03 .imgsizemain {
		padding-top: 120%;
	}
	#article03 .imgsize01 {
		padding-top: 120%;
	}
	#article03 .imgsize02 {
		padding-top: 75%;
	}
	#article03 .imgsize03 {
		padding-top: 140%;
	}
	#article03 .imgsize04 {
		padding-top: 140%;
	}

	#article04 .imgsizemain {
		padding-top: 130%;
	}
	#article04 .imgsize01 {
		padding-top: 75%;
	}
	#article04 .imgsize02 {
		padding-top: 75%;
	}
	#article04 .imgsize03 {
		padding-top: 75%;
	}
	#article04 .imgsize04 {
		padding-top: 75%;
	}

	#article05 .imgsizemain {
		padding-top: 75%;
	}
	#article05 .imgsize01 {
		padding-top: 75%;
	}
	#article05 .imgsize02 {
		padding-top: 75%;
	}
	#article05 .imgsize03 {
		padding-top: 75%;
	}
	#article05 .imgsize04 {
		padding-top: 75%;
	}
	#article05 .imgsize05 {
		padding-top: 75%;
	}

	#article06 .imgsizemain {
		padding-top: 75%;
	}
	#article06 .imgsize01 {
		padding-top: 75%;
	}
	#article06 .imgsize02 {
		padding-top: 130%;
	}
	#article06 .imgsize03 {
		padding-top: 75%;
	}
	#article06 .imgsize04 {
		padding-top: 75%;
	}
	#article06 .imgsize05 {
		padding-top: 75%;
	}

	#article07 .imgsizemain {
		padding-top: 75%;
	}
	#article07 .imgsize01 {
		padding-top: 75%;
	}
	#article07 .imgsize02 {
		padding-top: 75%;
	}
	#article07 .imgsize03 {
		padding-top: 75%;
	}
	#article07 .imgsize04 {
		padding-top: 75%;
	}

	#article08 .imgsizemain {
		padding-top: 75%;
	}
	#article08 .imgsize01 {
		padding-top: 130%;
	}
	#article08 .imgsize02 {
		padding-top: 75%;
	}
	#article08 .imgsize03 {
		padding-top: 75%;
	}

}

@media print, screen and (min-width: 769px) {
	dl.accordion {
		width: 720px;
		margin: 0 auto;
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		color: #666;
	}
	dl.accordion dt {
		text-align: left;
		font-size: 105%;
		padding: 1.4em 1.4em 1.4em 1.2em;
		line-height: 2.0em;
	}
	dl.accordion dt.arrow_below:after {
		right: 2%;
	}
	dl.accordion dd {
		display: none;
		padding: 1.6em 0 1.6em;
		line-height: 2.2em;		
	}
	dl.accordion dd h5 {
		margin: 0 0 1.6em;
	}
	dl.accordion dd .point_detail li {
		margin: 0 0 2.0em;
	}
	dl.accordion dd .point_detail li .bg_img {
		margin: 0 0 0.8em;
	}
	
	/** 枠あり **************/
	div.pinterrest {
		width: 420px;
		margin: 0 auto 2.4em;
	}
	div.example {
		width: 70%;
		border: 3px solid #99c2cd;
		padding: 2.0em 5%;
		margin: 0 auto;
	}
	div.example ul.list {
		margin: 0 0 1.6em;
		text-align: center;
	}
	div.example ul.list li {
		display: inline-block;
		margin: 0 10px 1.2em;
		position: relative;
		padding: 0 0 0 15px;
	}	
	div.example ul.list li:before {
		position: absolute;
		left: 0;
		top: 6px;
		content: "";
		width: 6px;
		height: 6px;
		border: 2px solid #99c2cd;
		-webkit-border-radius: 50%;/* 50%でもOK */
		-moz-border-radius: 50%;
		border-radius: 50%;
	}	
	div.example dl.two dt {
		margin: 0 0 1.6em;
		text-align: center;
	}
	div.example dl.two dt div{
		display: inline-block;
		width: 32%;
	}

	div.example dl.two dd {
		line-height: 2.2em;
		text-align: center;
	}
	
	
	#article01 .imgsizemain {
		padding-top: 75%;
	}
	#article01 .imgsize01 {
		padding-top: 65%;
	}
	#article01 .imgsize02 {
		padding-top: 65%;
	}
	#article01 .imgsize03 {
		padding-top: 65%;
	}
	#article01 .imgsize04 {
		padding-top: 65%;
	}

	#article02 .imgsizemain {
		padding-top: 75%;
	}
	#article02 .imgsize01 {
		padding-top: 75%;
	}
	#article02 .imgsize02 {
		padding-top: 75%;
	}
	#article02 .imgsize03 {
		padding-top: 75%;
	}
	#article02 .imgsize04 {
		padding-top: 120%;
	}

	#article03 .imgsizemain {
		padding-top: 120%;
	}
	#article03 .imgsize01 {
		padding-top: 120%;
	}
	#article03 .imgsize02 {
		padding-top: 75%;
	}
	#article03 .imgsize03 {
		padding-top: 140%;
	}
	#article03 .imgsize04 {
		padding-top: 140%;
	}

	#article04 .imgsizemain {
		padding-top: 130%;
	}
	#article04 .imgsize01 {
		padding-top: 75%;
	}
	#article04 .imgsize02 {
		padding-top: 75%;
	}
	#article04 .imgsize03 {
		padding-top: 75%;
	}
	#article04 .imgsize04 {
		padding-top: 75%;
	}

	#article05 .imgsizemain {
		padding-top: 75%;
	}
	#article05 .imgsize01 {
		padding-top: 75%;
	}
	#article05 .imgsize02 {
		padding-top: 75%;
	}
	#article05 .imgsize03 {
		padding-top: 75%;
	}
	#article05 .imgsize04 {
		padding-top: 75%;
	}
	#article05 .imgsize05 {
		padding-top: 75%;
	}

	#article06 .imgsizemain {
		padding-top: 75%;
	}
	#article06 .imgsize01 {
		padding-top: 75%;
	}
	#article06 .imgsize02 {
		padding-top: 130%;
	}
	#article06 .imgsize03 {
		padding-top: 75%;
	}
	#article06 .imgsize04 {
		padding-top: 75%;
	}
	#article06 .imgsize05 {
		padding-top: 75%;
	}

	#article07 .imgsizemain {
		padding-top: 75%;
	}
	#article07 .imgsize01 {
		padding-top: 75%;
	}
	#article07 .imgsize02 {
		padding-top: 75%;
	}
	#article07 .imgsize03 {
		padding-top: 75%;
	}
	#article07 .imgsize04 {
		padding-top: 75%;
	}

	#article08 .imgsizemain {
		padding-top: 75%;
	}
	#article08 .imgsize01 {
		padding-top: 30%;
	}
	#article08 .imgsize02 {
		padding-top: 30%;
	}
	#article08 .imgsize03 {
		padding-top: 30%;
	}

}



/*=============================================
	
	下部バナー
	
==============================================*/
@media print, screen and (max-width: 768px) {
	#style_bottom {
	}
	#style_bottom ul {
		width: 80%;
		margin: 0 auto;
	}
	#style_bottom ul li {
		margin: 0 0 1.6em;
	}

}

@media print, screen and (min-width: 769px) {
	#style_bottom {
	}
	#style_bottom ul {
		width: 720px;
		margin: 0 auto;
		text-align: center;
	}
	#style_bottom ul li {
		display: inline-block;
		float: left;
		width: 45%;
		margin: 0 2%;
	}
}