@charset "UTF-8";
/* ================================================ */
/*               全体設定                */
/* ================================================ */

body {

/*CSSだけで全体をフェードイン  ここから（bodyの中と@）*/
    animation: fadeIn 2s ease  0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;

}

html,body,h1, h2, h3, h4, h5, h6,
div, p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td {
	margin: 0;
	padding: 0;
	font-family:
		"Hiragino Mincho ProN","Mshtakan","Athelas",
		"游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
		"メイリオ", Meiryo,
		"ヒラギノ角ゴ Pro W3",
		"HIragino Kaku Gothic Pro W3",
		"HIragino Kaku Gothic Pro",
		Osaka,
		"ＭＳ Ｐゴシック", "MS P Gothic",
		sans-serif;
}

.container{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/*CSSだけで全体をフェードイン、ここまで
（bodyの中と、@keyframes fadeIn、@-webkit-keyframes fadeIn）*/



*{
	box-sizing: border-box;
}

div{
	display: block;
}

p{
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 1px;
}



/*スクロールした時にふわっと表示ここから*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1.5s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/*ここまで*/


/*=============================
		PC : 画面の横幅が769px以上*/
@media screen and (min-width: 769px){
.sp, .tb{
	display: none;

}


.topic-title{
	width: 70%;
	margin: 0 auto;
	text-align: center;
	padding-top: 6em;
	padding-bottom: 3.5em;
}
.topic-title h1{
	font-size: 42px;
	font-family: "Athelas";
	color: #484848;
	text-shadow: 2px 2px 2px #ffffffd1;
    margin: 0 auto;
   	letter-spacing: 5px;
   	border-bottom: 2px solid #737373;
   	box-shadow: 0px 1px 0px #ffffff87;
   	padding-bottom: 10px;
}

.topic-title p{
	font-size: 18px;
	font-family: "Hiragino Mincho ProN";
	color: #484848;
	text-shadow: 1px 1px 1px #ffffffd1;
	border-top: 1px solid #737373;
	margin-top: 3px;
    padding-top: 7px;
    letter-spacing: 3px;
}

}


/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

@media screen and (min-width:641px) and (max-width: 768px){

.pc,.sp{
	display: none;
}

.container{
	max-width: 641px;
	width: 100%;
	margin: 0 auto;
}
.topic-title{
	width: 70%;
	margin: 0 auto;
	text-align: center;
	padding-top: 4em;
	padding-bottom: 3.5em;
}
.topic-title h1{
	font-size: 36px;
	font-family: "Athelas";
	color: #484848;
	text-shadow: 2px 2px 2px #ffffffd1;
    margin: 0 auto;
   	letter-spacing: 5px;
   	border-bottom: 2px solid #737373;
   	box-shadow: 0px 1px 0px #ffffff87;
   	padding-bottom: 10px;
}

.topic-title p{
	font-size: 15px;
	color: #484848;
	text-shadow: 1px 1px 1px #ffffffd1;
	border-top: 1px solid #737373;
	margin-top: 3px;
    padding-top: 7px;
    letter-spacing: 3px;
}

p {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1px;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){
.pc,.tb{
	display: none;
}

.container{
	max-width: 375px;
	width: 100%;
	margin: 0 auto;
}
.topic-title{
	width: 92%;
	margin: 0 auto;
	text-align: center;
	padding-top: 6em;
	padding-bottom: 3em;
}
.topic-title h1{
	font-size: 35px;
	color: #484848;
	text-shadow: 2px 1px 1px #ffffffad;
	font-family: "Athelas";
    margin: 0 auto;
   	letter-spacing: 3px;
   	border-bottom: 2px solid #737373;
   	box-shadow: 0px 1px 0px #ffffff87;
   	padding-bottom: 10px;
}

.topic-title p{
	font-size: 18px;
	color: #484848;
	text-shadow: 1px 1px 1px #ffffffd1;
	border-top: 1px solid #737373;
	margin-top: 3px;
    padding-top: 17px;
    letter-spacing: 3px;
}

p {
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 1px;
}
}

/* ================================================ */
/*header*/
/* ================================================ */

header{
	background-color: rgba(255,255,255,0.9);
	box-shadow: 0px 1px 15px #c4c3c3;
	height: 80px;
	width:100%;
	margin: 0 auto;
	position: fixed;
	z-index: 10;
}

.header-contents{
	padding-top: 3px;
	max-width: 800px;
	height: 100%;
	margin: 0 auto;
}

.header-logo{
	float: left;
}

.header-logoimg{
	float: left;
	width: 100px;
}

.header-text{
	padding-left: 107px;
	padding-top: 14px;
}
.header-text p{
	font-size: 10px;
}
.header-text h3{
	font-size: 15px;
	letter-spacing: 1px;
}

.header-btn{
	float: right;
}

.header-btn a{
	display: block;
	color:#fff;
	width: 300px;
	height: 45px;
	line-height: 45px;
	border-radius: 30px;
	text-align: center;
	box-shadow: 3px 3px 3px #a1a0a0;
	margin:10px 5px 10px 0;
	transition: all 0.3s;
	position: relative;
	letter-spacing: 5px;
    font-size: 19px;
    background-color: #b6494e;
	text-decoration: none;
}
.header-btn a:hover {
	background-color: #d95c62;
}
/*=============================
	PC 2 : 画面の横幅が769px以上*/
@media screen and (max-width: 889px){
.header-contents{
	margin-left: 2.5em;
}

}
/*==============================
	Tablet : 画面の横幅~768pxまで*/

@media screen and (max-width: 768px){
.header-btn a{
	width: 270px;
	letter-spacing: 4px;
	line-height: 46px;
	height: 46px;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){
header{
	height: 55px;
}

.header-contents{
	margin-left: 0.5em;
}

.header-logoimg{
	width: 70px;
}
.header-logoimg img{
	width: 100%;
	height: 100%;
}
.header-text{
	padding-left: 75px;
	padding-top: 10px;
}


.header-text h3{
	font-size: 10px;
	width: 118px;
	line-height: 15px;
}

.header-btn a{
	width: 125px;
	height: 33px;
	line-height: 33px;
	background-color: #b6494e;
	box-shadow: 2px 2px 2px #a1a0a0;
	margin:8px 4px 3px 0;
	letter-spacing: 2px;
    font-size: 12px;
}

}



/* ================================================ */
/*　トップ画像*/
/* ================================================ */

/*=============================
		PC : 画面の横幅が769px以上*/

.top-wrapper{
	background-image: url(images/bg.jpg);
	background-size: cover;
	height: 600px;
	text-align: center;
	padding-top: 130px;
}
.top-bg{
	background-color:rgba(255,255,255,0.6);
	width: 73%;
	padding-top: 3em;
	padding-bottom: 2em;
	border: 1px dotted #fff;
}
.top-wrapper h1{
	font-size: 40px;
	letter-spacing: 5px;
	color: #584e40;
	width: 90%;
	margin: 0 auto;
	line-height: 78px;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;
	text-shadow:1px 1px 5px rgba(255, 255, 255, 0.5), 
				1px 1px 2px rgba(255, 255, 255, 0.9);
}

.top-wrapper h2{
	font-size: 25px;
	letter-spacing: 5px;
	line-height: 38px;
	font-family: "Athelas";
	color: #584e40;
	text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.9);
	padding-top: 30px;
	padding-bottom: 20px;
}

.top-btn a{
	display: block;
	font-size: 22px;
	color:#fff;
	width: 60%;
	height: 50px;
	border-radius: 30px;
	background-color: #b6494e;
	text-decoration: none;
	text-align: center;
	line-height: 50px;
	box-shadow:3px 3px 3px #0000007d;
	transition: all 0.3s;
	position: relative;
	letter-spacing: 3px;
	margin: 0 auto;
}

.top-btn a:hover {
	background-color: #d95c62;
}



/*==============================
	Tablet : 画面の横幅~768pxまで*/

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

.top-wrapper{
	background-image: url(images/bg.jpg);
	background-size: cover;
	height: 500px;
	text-align: center;
	padding-top: 120px;
}
.top-bg{
	width: 75%;
	padding-top: 2em;
}

.top-wrapper h1{
	font-size: 32px;
	letter-spacing: 2px;
	line-height: 61px;
}
.top-wrapper h2{
	font-size: 23px;
	line-height: 32px;
	padding-top: 35px;
	padding-bottom: 10px;
}
.top-btn a{
	width: 80%;
	font-size: 20px;
	line-height: 48px;
	height: 48px;

}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width: 640px) {
.top-wrapper{
	background-image: url(images/bg.jpg);
	background-size: cover;
	height: 450px;
	text-align: center;
	padding-top: 90px;
}

.top-bg{
	width: 93%;
	padding-top: 2.8em;
}
.top-wrapper h1{
	font-size: 25px;
	line-height: 52px;
	font-weight: bold;
}
.top-wrapper h2{
	font-size: 20px;
	line-height: 27px;
	padding-top: 45px;
	font-weight: bold;
}
.top-btn a{
	font-size: 18px;
	line-height: 40px;
    height: 40px;
}
}
/* ================================================ */
/*コンテンツ*/
/* ================================================ */

/*=============================
		PC : 画面の横幅が769px以上*/

.main-wrapper{
	padding-top: 70px;
	padding-bottom: 60px;
	height: 500px;
}

.main-contents2{
	width: 100%;
	height: 400px;
	display: flex;/* flexコンテナ化 */
}

.main-contents-title1 h1{
	font-size: 32px;
	font-family: "Athelas";
    margin: 0 auto;
   	letter-spacing: 1px;


}

.main-contents-title1 p{
	font-size: 15px;
	font-family: "Hiragino Mincho ProN";
    padding-top: 7px;
    padding-bottom: 22px;
    letter-spacing: 2px;
}

.main-photo{
	padding-right: 10px;
}

.main-text{
	padding: 10px 0;
}

.main-text h2{
	padding-bottom: 30px;
}

.main-textcontents{
	background-color: #f8f8f8;
	padding-top: 10px;
	padding-left: 30px;
	margin-bottom: 7px;
}
.main-textcontents p{
	text-align: left;
	font-family: "Hiragino Mincho ProN";
	padding-bottom: 13px;
	font-size: 12px;
	letter-spacing: 3px;
	padding-left: 35px;
}

.letter{
	float: left;
	border: solid 1px #000;
	padding: 0.5em 1em;
	font-size: 14px;
	margin-top: 11px;
}

.price-contents{
	margin-top: 10px;
}

.price{
	display: flex;
	padding-left: 1.5em;
}

.price-text{
	font-family: "Mshtakan";
    font-size: 56px;
    letter-spacing: 5px;
    padding-top: 9px;

}
.price span{
	font-size: 20px;
	padding-right: 11px;
	padding-left: 5px;
}


.main-btn a{
	display: block;
	font-size: 22px;
	color:#fff;
	width: 422px;
	height: 55px;
	border-radius: 30px;
	background-color: #b6494e;
	text-decoration: none;
	text-align: center;
	line-height: 55px;
	box-shadow: 3px 3px 3px #a1a0a0;
	margin:22px 0 10px 0;
	transition: all 0.3s;
	position: relative;
	letter-spacing: 3px;
}

.main-btn a:hover {
	background-color: #d95c62;
}

.coution{
	font-size: 11px;
	color: #686969;
	line-height: 13px;
	padding-left: 20px;
	letter-spacing: 2px;
}


/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

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


.main-wrapper {
    padding-top: 50px;
    padding-bottom: 0px;
    height: 460px;
}

.main-contents-title h1{
	font-size: 33px;
	font-family: "Athelas";
    margin: 0 auto;
   	letter-spacing: 3px;

}

.main-contents-title p{
	font-size: 15px;
	font-family: "Hiragino Mincho ProN";
	padding-top: 5px;
	letter-spacing: 2px;
}

.main-contents{
	width: 100%;
	display: block;
	text-align: center;
}
.main-textcontents p{
	font-size: 11px;
	padding-left: 0;
}

.letter{
	font-size: 13px;
}

.price-contents{
	margin-top: 20px;
}

.price{
	padding-left: 0.5em;
}

.price span{
	font-size: 16px;
	padding-right: 9px;
}

.price-text{
	font-size: 51px;
	letter-spacing: 4px;
}

.main-btn a{
	width: 100%;
	font-size: 19px;
	height: 50px;
	line-height: 50px;
}

.main-btn{
	margin-top: 12px;
	margin-bottom: 5px;
}

.main-contents2{
	display: flex;
	padding-top: 15px;
}


.coution{
    font-size: 9px;
    line-height: 13px;
    color: #686969;
    padding-left: 0px;
    letter-spacing: 1px;

}
}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){

.main-wrapper{
	height: 780px;
	padding-top: 60px
}

.main-contents2{
	display: block;
	padding-top: 20px;
}
.main-contents-title{
	border-bottom: 1px dotted #b3b1b1;
    border-top: 1px dotted #b3b1b1;
    width: 90%;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

.main-contents-title h1{
	font-size: 31px;
	font-family: "Athelas";
    margin: 0 auto;
   	letter-spacing: 5px;
   	line-height: 42px;

}

.main-contents-title p{
	font-size: 15px;
	padding-top: 12px;
	letter-spacing: 0px;
	padding-bottom: 10px;
}

.main-photo{
	padding-right: 0px;
}

.main-text{
	padding-top: 30px;
}

.main-textcontents{
	width: 90%;
	margin: 0 auto;
	margin-bottom: 25px;
}

.main-textcontents p{
	font-size: 10px;
	padding-bottom: 8px;
	line-height: 15px;
}
.price-contents{
	width: 90%;
	margin: 0 auto;

}

.price{
	padding-left: 0.8em;
}

.price-text{
	font-size: 46px;
}

.price span{
	font-size: 13px;
	letter-spacing: 2px;
}

.letter{
	font-size: 10px;
	margin-top: 14px;
}


.main-btn{
	margin-left: 3%;
    margin-right: 3%;
}

.main-btn a{
	height: 43px;
	line-height: 43px;
	border-radius: 30px;
	font-size: 17px;
	box-shadow: 2px 2px 1px #a1a0a0;
	margin: 8px 0 0 0;

}


}


/* ================================================ */
/* topic1// Item Details*/
/* ================================================ */

.details-wrapper{
	background-color: #f7f7f7;
	padding-bottom: 100px;
}



.topic1-contents{
	background-color: #fff;
	box-shadow:2px 2px 9px -1px #dfdede;
    width: 750px;
    margin: 0 auto;

}
.t1-1,.t1-2,.t1-3{
	width: 75%;
	margin: 0 auto;
	padding-top: 3.5em;
	padding-bottom: 2em;
}

.t1-title{
	display: flex;
	border-bottom: 2px solid #009eb1;
	padding-bottom: 5px;
	padding-left: 4em;
}
.t1-point h4{
	width: 110px;
}
.t1-point h4 img{
	width: 90%;
}
.t1-point-text{
	position: relative;
	width: 100%;
}
.t1-point-text h3{
	position: absolute;
	bottom: 0;
	font-size: 21px;
	padding-left: 13px;
	letter-spacing: 3px;
	line-height: 33px;
	font-weight: bold;
}
.line h3{
	position: absolute;
	bottom: 15px;
	font-size: 21px;
	padding-left: 13px;
	letter-spacing: 3px;
	line-height: 33px;
	font-weight: bold;
}


.t1-1 p,.t1-2 p, .t1-3 p{
	line-height: 27px;
	letter-spacing: 2px;
	padding-top: 37px;
	padding-bottom: 30px;
	width: 75%;
	margin: 0 auto;
}

.t1-photo{
	margin: 0 auto;
	width: 87%;
	box-shadow: 1px 1px 5px 2px #efecec;
}
.t1-photo img{
	width: 100%;
}

/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

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

.topic1-contents{
    width: 100%;
}


.t1-title{
	border-bottom: 1px solid #009eb1;
	width: 93%;
	margin: 0 auto;
}

.t1-point-text h3{
	font-size: 19px;
}


.t1-1,.t1-2,.t1-3{
	width: 90%;
}

.t1-photo{
	 text-align: center;
	 width: 80%;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){
.details-wrapper{
	padding-bottom: 3em;
}

.topic1-contents{
	display: block;
	box-shadow: none;
	background-color: transparent;
	padding: 0 0 30px 0;
	width: 96%;
    margin: 0 auto;
}

.t1-title{
	display: block;
	width: 95%;
	padding-left: 0;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: none;
}
.t1-1,.t1-2,.t1-3{
	width: 97%;
	padding-top: 3em;
	margin-bottom: 1em;
	background-color: #fff;
	border:1px solid #e4e4e4;
}

.t1-point h4{
	margin: 0 auto;
	padding-bottom: 25px;
	width: 72px;
}

.t1-point h4 img{
	width: 100%;
}

.t1-point-text h3{
	position: static;
	font-size: 22px;
	letter-spacing: 4px;
	line-height: 42px;
	padding-left: 0;
}
.t1-1 p, .t1-2 p, .t1-3 p {
	font-size: 12px;
	line-height: 29px;
	width: 80%;
	padding-top: 22px;
}
.t1-photo{
	box-shadow: none;
	width: 95%;
}

}

/* ================================================ */
/* 途中ボタン/
/* ================================================ */


.middle-btn-wrapper{
	margin: 0 auto;
	width: 100%;
	height: 235px;
	text-align: center;
	background: linear-gradient(-45deg,      
				rgba(241, 232, 239, 0.7),rgba(182, 224, 253, 0.8)),url(images/kulala.png);
	background-size: cover;
	color: #171616;
}
.middle-btn-container{
	max-width: 900px;
	margin: 0 auto;
	padding-top: 3.5em;
}
.middle-btn-wrapper h3{
	font-size: 30px;
	letter-spacing: 5px;
	font-family: "Athelas";
	line-height: 40px;
	text-shadow: 1px 1px 1px #fff;
}

.middle-btn-wrapper h4{
	font-size: 16px;
	padding-bottom: 10px;
	text-shadow: 1px 1px 1px #fff;
}

.middle-btn{
	padding-top: 10px;
}

.middle-btn a{
	display: block;
	color:#fff;
	width: 60%;
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	background-color: #b6494e;
	text-decoration: none;
	text-align: center;
	box-shadow:2px 2px 2px #a1a0a0;
	margin: 0 auto;
	transition: all 0.3s;
	position: relative;
	letter-spacing: 5px;
    font-size: 20px;
}

.middle-btn a:hover {
	background-color: #d95c62;
}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){
.middle-btn-wrapper{
	height: 195px;
	background: linear-gradient(-45deg,      
				rgba(251, 243, 249, 0.9),rgba(182, 224, 253, 0.7)),url(images/kulala2.png);
	background-size: cover;
}
.middle-btn-container{
	padding-top: 3em;
}
.middle-btn-wrapper h4 {
    font-size: 14px;
    padding-bottom: 3px;
    text-shadow: 1px 1px 1px #fff;
}

.middle-btn-wrapper h3{
	font-size: 25px;
	letter-spacing: 1px;
	text-shadow: 2px 1px 2px #fff;
}

.middle-btn a{
	height: 43px;
	line-height: 43px;
	font-size: 17px;
	width: 335px;
}
}




/* ================================================ */
/* topic2// Voice*/
/* ================================================ */
.voice-wrapper{
	background-color: #fff;
	padding-bottom: 100px;
}

.topic2-contents{
	display: flex;
}

.t2-text{
	background-color: #fff;
	box-shadow:1px 2px 4px 1px #dfdede;
	height: 435px;
	margin-top: 22px;
	padding:29px 16px 0 19px;
}

.t2-text h3{
	font-size: 20px;
	font-weight: bold;
	line-height: 36px;
	letter-spacing: 3px;
	border-bottom: 2px solid #009eb1;
	padding-bottom: 5px;
	padding-left: 10px;
}

.t2-text p{
	font-size: 13px;
	line-height: 28px;
	padding-top: 20px;
	width: 300px;
	margin: 0 auto;

}

/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

@media screen and (max-width: 768px){
.voice-wrapper{
	padding-bottom: 85px;
}
.topic2-contents{
	width: 97%;
    display: block;
    text-align: center;
    margin: 0 auto;
    box-shadow: 1px 2px 4px 1px #dfdede;
    padding:10px 0;
}

.sp-title{
	padding-top: 30px;
	width: 86%;
	margin: 0 auto;
}
.sp-title h3{
	font-size: 19px;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 30px;
	border-bottom: 1px solid #009eb1;
	padding-bottom: 9px;
	margin-bottom: 10px;
}
.t2-photo{
	width: 60%;
	margin: 0 auto;
	padding-top: 30px;
}
.t2-photo img{
	width: 100%;
}

.t2-text{
	box-shadow: none;
	margin-top: 0;
	height: 315px;
}

.t2-text p{
	width: 80%;
	text-align: left;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){
.voice-wrapper{
	padding-bottom: 70px;
	height: 1030px;
}
.t2-photo{
	width: 290px;
	padding-top: 15px;
}

.topic2-contents{
	width: 97%;
	height: 760px;
    box-shadow: none;
    border: 1px solid #dfdede;
    padding-top: 30px;
}

.sp-title{
	width: 97%;
	padding-top: 10px;
}

.sp-title h3{
	font-size: 21px;
	letter-spacing: 3px;
	line-height: 35px;
	border-bottom: none;
}

.t2-text p{
	font-size: 12px;
	line-height: 29px;
	width: 85%;
}

}



/* ================================================ */
/* topic4// Flavor*/
/* ================================================ */

.flavor-wrapper{
	background:linear-gradient(#9fd5de, #daedef);
	padding-bottom: 40px;
}

.topic4-contents{
	height: 900px;
}

.t4{
	float: left;
	width: 50%;
	text-align: center;
	position: relative;
	margin-bottom: 120px;
	padding: 0 10px;
}

.t4-photo img{
	width: 100%;
	box-shadow:5px 6px 3px 0px #c1d8dc;
}
.t4-photo{
	position: relative;
}

.t4-text{
	width: 80%;
	height: 125px;
	margin: 0 auto;
	background-color: #f7f4f4;
	border: 1px solid #efefef;
	box-shadow:3px 4px 3px 0px #c1d8dc;
	padding-top: 17px;
	position: absolute;
	top: 85%;
    left: 10%;
}

.t4-text h3{
	font-size: 20px;
	letter-spacing: 3px;
	font-weight: bold;
	padding-bottom: 15px;
}

.t4-text p{
	font-size: 12px;
	font-weight: lighter;
	padding:0 15px 10px 15px; 
	color: #686969;
}


/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

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

.topic4-contents{
	height: 750px;
}

.t4-text{
	height: 115px;
	margin: 0 auto;
	padding-top: 16px;
}

.t4-text h3{
	font-size: 18px;
	padding-bottom: 12px;
}

.t4-text p{
	font-size: 11px;
	line-height: 18px;
	font-weight: lighter;
	color: #686969;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){

.t4{
	margin-bottom: 80px;
	padding: 0px 2px;
}

.topic4-contents {
    height: 480px;
}

.t4-photo img{
	box-shadow: none;
	/*box-shadow:2px 2px 1px 0px #abcad0;*/
}

.t4-text {
    width: 90%;
    box-shadow: none;
    /*box-shadow:2px 2px 1px 0px #abcad0;*/
    top: 80%;
    left: 5%;
    padding-top: 11px;
    height: 92px;

}

.t4-text h3 {
    font-size: 13px;
    padding-bottom: 3px;
}

.t4-text p {
    font-size: 10px;
    line-height: 13px;
    color: #747575;
    padding: 4px 5px 4px 5px;
}
}

/* ================================================ */
/* ご注文について*/
/* ================================================ */

.order-wrapper{
	padding-top: 5em;
	padding-bottom:5em;
}

.order-container{
	box-shadow:2px 2px 3px 2px #dfdede;
	width: 800px;
	padding-top: 40px;
	padding-bottom: 45px;
	text-align: center;
}

.order-title h2{
	font-size: 28px;
	padding-bottom: 20px;
	border-bottom: 2px solid;
	border-color: #d2d0d0;
	width: 90%;
	margin: 0 auto;

}

.order h3{
	padding-top: 6px;
    font-size: 22px;
    letter-spacing: 4px;
    vertical-align: middle;
}

.order-number{
	margin-right: 8px;

}
.order-contents-title{
	display: flex;
	padding-top: 37px;
	padding-bottom: 12px;
}


.o1{
	padding-left: 19em;
}

.o2{
	padding-left: 16em;
}

.o3{
	padding-left: 18em;
}

.order-text,.order-p{
	font-size: 12px;
	letter-spacing: 1.5px;
	color: #656565;
}

.under-coution{
	color: #656565;
	font-size: 18px;
	display: flex;
	align-items: center;
	padding-top: 50px;
	padding-bottom: 15px;
	width: 90%;
    margin: 0 auto;
}


/*ご注意の前後のボーダーの記述*/
.under-coution:before, .under-coution:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #d2d0d0;
	display: block;
}
.under-coution:before {
	margin-right: 20px;
}
.under-coution:after {
	margin-left: 20px;
}

/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

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

.order-title h2{
	font-size: 27px;
}
.o1{
	padding-left: 14.5em;
}

.o2{
	padding-left: 11em;
}

.o3{
	padding-left: 13em;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/

@media screen and (max-width:640px){
.order-wrapper{
	padding-bottom:3em;
	background: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
}

.order-container{
	width: 94%;
	background: #fff;
	border: 1px solid #dad9d9;
	box-shadow: none;
    padding-bottom: 35px;
}

.order-title h2{
	font-size: 23px;
	letter-spacing: 3px;
	padding-bottom: 18px;
    border-bottom: 1px solid #d2d0d0;
}

.order-text{
	text-align: left;
	width: 85%;
    margin: 0 auto;
    line-height: 30px;
}
.order h3{
	padding-top: 6px;
    font-size: 18px;
    letter-spacing: 3px;
}

.order-contents-title{
	padding-top: 35px;
	padding-bottom:14px;
}

.order-number{
	margin-right: 14px;
}
.o1{
	padding-left: 6.5em;
}

.o2{
	padding-left: 4em;
}

.o3{
	padding-left: 5.5em;
}
.under-coution{
	font-size: 15px;
	letter-spacing: 2px;
}

.order-p{
	font-size: 10px;
	line-height: 18px;
	text-align: left;
	width: 85%;
    margin: 0 auto;
}

}


/* ================================================ */
/* 最後の注文欄*/
/* ================================================ */
.end-wrapper{
	height: 400px;
	background-color: #f7f7f7;
	box-shadow: 1px 1px 3px 0px #e2e2e2;
	text-align: center;
}

.end-contents2{
	width: 100%;
	height: 400px;
	display: flex;
	padding-top: 35px;
}


.end-photo img{
	box-shadow:2px 2px 3px 2px #dfdede;
}

.end-text{
	padding-left: 10px;
}

.end-text h2{
	padding-bottom: 30px;
}

.end-textarea{
	background-color: #fff;
	padding: 20px 0px 10px 16px;
	width: 450px;
	text-align: left;
}

.price-contents2{
	margin-top: 15px;
}

.end-btn a{
	display: block;
	width: 95%;
	font-size: 22px;
	letter-spacing: 3px;
	color:#fff;
	height: 55px;
	border-radius: 30px;
	background-color: #b6494e;
	text-decoration: none;
	text-align: center;
	line-height: 55px;
	box-shadow: 3px 3px 3px #a1a0a0;
	margin:28px 0 10px 0;
	transition: all 0.3s;
	position: relative;
}

.end-btn a:hover {
	background-color: #d95c62;
}




/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

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

.end-wrapper{
	padding-top: 30px;
}

.end-contents{
	display: block;
	text-align: center;
}

.end-contents2{
	display: flex;
	    padding-top: 30px;
}

.end-text h2{
	padding-bottom: 0px;
}

.end-text {
    padding: 0px 10px;
}

.end-textarea {
    background-color: #fff;
    padding: 30px 3px 10px 10px;
    width: 100%;
}


.end-btn a{
	margin: 38px 0 10px 0;
	font-size: 20px;
	height: 53px;
	line-height: 53px;
	width: 97%;
}
.price-contents2{
	margin-top: 20px;
}

.price-contents2>.price{
	padding-left: 0;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/

@media screen and (max-width:640px){
.end-wrapper{
	height: 800px;
	padding-top: 55px;
	text-align: center;
	background-color: #fff;
}

.end-contents2{
	display: block;
	padding-top: 50px;
	padding-bottom: 5px;
	height: 100%;
	width: 90%;
	margin: 0 auto;
}

.end-title{
	margin-bottom: 20px;
}

.end-photo{
	padding-right: 0px;
}

.end-photo img {
	box-shadow: 0px 1px 2px 1px #dfdede;
}

.end-textarea{
	padding:25px 0px 10px 0px;
	background-color: transparent;
}
.end-textarea>p{
	line-height: 29px;
}

.price-contents2>.price{
	padding-left: 1em;
}
.price-contents2{
	margin-top: 25px;
}

.end-btn{
	margin-top: 13px;
}

.end-btn a{
	height: 43px;
	line-height: 43px;
	border-radius: 30px;
	font-size: 17px;
	box-shadow: 2px 2px 1px #a1a0a0;
	margin: 14px 0 0 0;

}

}



/* ================================================ */
/*フッター*/
/* ================================================ */


.footer-contents{
	padding-top: 70px;
	padding-bottom: 25px;
	text-align: center;
}

.footer-contents img{
	margin-bottom: 35px;
}

.footer-contents p{
	padding-bottom: 16px;
	font-size: 12px;
	color: #686969;
}


/*==============================
	Tablet : 画面の横幅が641~768pxまで*/

@media screen and (max-width: 768px){
.footer-contents p{
	line-height: 12px;
	font-size: 11px;
}

}

/*==============================
		Smartphone :  画面の横幅が640pxまで*/
@media screen and (max-width:640px){

.text{
	display: inline-block;
}/*<span>で囲ったところ、レスポンシブに応じて改行する*/

.footer-contents {
    padding-top: 30px;
    padding-bottom: 5px;
    text-align: center;
}

.footer-contents img {
    margin-bottom: 20px;
}

.footer-contents p {
    line-height: 16px;
    font-size: 10px;
    padding-bottom: 12px;
}


}

/* ================================================ */
/*ページトップボタン*/
/* ================================================ */

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}


#pageTop a {
  display: block;
  z-index: 999;
  opacity: 0.9;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}