@charset "utf-8";

.for-sp{
	display:none;
}

body.has-bg{
	background: #f9f9f9;
}

/* header */
header{
	position: fixed;
	top:0;
	left:0;
	z-index: 900;
	width: 100%;
}
header > div{
	position: relative;
	min-width: 980px;
	margin: 0 auto;
}
header > div h1{
	padding-left:50px;
}
header > div h1 span{
	display:none;
}
header > div h1 img{
	margin-top: 29px;
	width: 308px;
}
header > div h1 a:hover img{
	opacity: 0.7;
}
header > nav{
	position: absolute;
	display: none;
	top:104px;
	right: 30px;
	width:300px;
	box-sizing: border-box;
	padding: 20px 0;
	background-color: rgba(255,255,255,0.8);
}
header.show_nav > nav{
	display: block
}
header > nav li{
	width:100%;
	margin: 0 0 16px;
}

header > nav li:last-child{
	margin: 0;
}
header > nav li a{
	position: relative;
	display: block;
	width:100%;
	padding: 4px;
	text-align: right;
	box-sizing: border-box;
}
header > nav li a:hover::before{
	position: absolute;
	z-index:501;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	animation-name: gAnchorHoverAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	content: "";
}


@keyframes gAnchorHoverAnimation {
    0% {width: 0;}
    100% {width: 100%;}
}
header #txt-g-news,
header #txt-g-weare{
	height:54px
}
header > nav div{
	padding: 20px 20px 0 0;
	text-align: right;
}
header > nav div a:hover{
	opacity:0.7
}
header #btn-x2{
	display: inline-block;
	width: 22px;
	height:20px;
	background: url(../img/icon-x.svg) no-repeat center bottom scroll;
	font-size: 1.7rem;
	vertical-align:middle;
}
#btn-camera2{
	display: inline-block;
	width:22px;
	height:24px;
	margin-top:4px;
	margin-right: 18px;
	background: url(../img/icon_camera.svg) no-repeat 0 0 scroll;
	background-size: 22px auto;
	text-align: right;
	font-size: 1.7rem;
	vertical-align:middle;
}
header #txt-g-service{
	height:60px
}
header #txt-g-column,
header #txt-g-recipe,
header #txt-g-whats{
	height:74px
}
header > nav li a svg{
	position: absolute;
	top: 10px;
	right: 24px;
	z-index:501;
	height: 18px;
}
header > nav li a#txt-g-service svg{
	width: 99px;
}
header > nav li a#txt-g-weare svg{
	width: 84px;
	right: 21px;
}
header #txt-g-recipe svg{
	width: 95px;
	height: 16px;
}
header > nav li a#txt-g-column svg{
	width: 108px;
	right: 18px;
}
header > nav li a#txt-g-whats svg{
	width: 92px;
	right: 20px;
}
header > nav li a#txt-g-news svg{
	width: 80px;
}
header > nav li a span{
	position: absolute;
	top: 36px;
	right: 24px;
	z-index:501;
	display: block;
	text-align: right;
	font-size: 1.2rem;
}
header button{
	position: absolute;
	min-width: 0;
	margin: 0;
	padding:0;
	box-shadow:none;
}
header button:hover{
	opacity: 0.7;
}
header #btn-menu{
	position:static;
	display: block;
	width: 44px;
	height: 44px;
	margin-left: 30px;
	background: none;
	color:#957a68;
	line-height: 1;
	font-size: 0;
}
header #btn-menu.for-sp{
	display:none;
}
header #btn-menu > span{
	position: relative;
	display: block;
	height: 44px;
}
header #btn-menu span span{
	position: absolute;
	display: block;
	left: 0;
	top:22px;
	height:2px;
	width: 100%;
	background-color: #987b67;
}
header #btn-menu > span::before,
header #btn-menu > span::after{
	position: absolute;
	left: 0;
	width: 44px;
	height: 2px;
	background-color: #987b67;
	content:"";
}
header.show_nav #btn-menu > span::before,
header.show_nav #btn-menu > span::after{
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	transform: rotate(0deg);
}

header.show_nav #btn-menu > span::before{
	animation-name: showNavBtnSpanBeforeAnimation;
}
header.show_nav #btn-menu > span::after{
	animation-name: showNavBtnSpanAfterAnimation;
}
header #btn-menu:disabled:hover{
	cursor:default;
}
header.show_search #btn-menu{
	display: none;
}
@keyframes showNavBtnSpanBeforeAnimation {
    0% {top: 0px;transform: rotate(0deg);}
    100% {top: 22px;transform: rotate(45deg);}
}
@keyframes showNavBtnSpanAfterAnimation {
    0% {top: 34px;transform: rotate(0deg);}
    100% {top: 22px;transform: rotate(-45deg);}
}
header.show_nav #btn-menu span span{
	animation-name: showNavBtnSpanSpanAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes showNavBtnSpanSpanAnimation {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
header #btn-menu span::before{
	top: 10px;
}
header #btn-menu span::after{
	top: 34px;
}
header #btn-search{
	position:static;
	display: block;
	width: 42px;
	height: 42px;
	margin-left: 40px;
	background: url(../img/icon_zoom.svg) no-repeat 0 0 scroll;
	background-size: 42px auto;
}

header #btn-search.for-sp{
	display:none;
}
header #btn-search:disabled:hover{
	cursor:default;
}
header.show_search #btn-search{
	right: 114px;
	background: none;
}
header.pos_fix.show_search #btn-search{
	top: 6px ;
	margin-left: 20px;
}
header.show_search #btn-search span{
	position: relative;
    display: block;
	height: 100%;
}
header.show_search #btn-search span::before,
header.show_search #btn-search span::after{
	position: absolute;
	left: 40px;
	top: 20px ;
	width: 40px;
	height: 2px;
	background-color: #987b67;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	content:"";
}

header.show_search #btn-search span::before{
	transform: rotate(45deg);
}
header.show_search #btn-search span::after{
	transform: rotate(-45deg);
}
@keyframes showNavBtnSearchAnimation {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
header #btn-mailmagazine{
	position: fixed;
	bottom:50px;
	left:20px;
	display: none;
	min-width: 0;
	width: 90px;
	padding-bottom:104px;
	background: url(../img/icon_mail_magazine.svg) no-repeat center bottom scroll;
	background-size: 60px auto;
	text-align: center;
}
.top-page header #btn-mailmagazine{
	display: block;
}
header #btn-mailmagazine:hover{
	opacity: 0.7;
}
header #btn-mailmagazine img{
	width: 70px;
}
header #side-box{
	display: flex;
	position: absolute;
	flex-direction :row;
	right: 50px;
	top: 37px;
}
header.show_search #side-box ul,
header.show_search #side-box a{
	display:none;
}
header #side-box ul{
	display: flex;
	flex-direction :row;
	height:45px;
	padding-right:50px;
}

header #side-box ul li{
  display: flex;
  padding: 0 0 0 25px;
  line-height:45px;
}

header #side-box ul li::after{
	display:inline-block;
	width: 20px;
	height:45px;
	margin-left: 25px;
	background: url(../img/line-slash.svg) no-repeat center bottom scroll;
	vertical-align: top;
    content:"";
}
header #side-box ul li:last-child::after{
	display:none
}
header #side-box ul li a:hover{
  opacity:0.7;
}
header #side-box ul li img{
	height:42px;
	width:auto;
	margin-top:2px;
	vertical-align: top;
}
 header #side-box ul li img.icon-recipe{
	margin-top:5px;
	height:40px;
 }
 header #side-box ul li img.icon-whats{
	margin-top:6px;
	height:38px;
 }

header #btn-x{
	display: block;
	height: 32px;
	width: 32px;
	margin-top: 6px;
	background: url(../img/icon-x.svg) no-repeat center bottom scroll;
	font-size: 1.7rem;
}
header #btn-camera{
	display: block;
	width:38px;
	height:41px;
	margin-top: 0;
	margin-right: 32px;
	background: url(../img/icon_camera.svg) no-repeat right 3px scroll;
	background-size: 37px;
	text-align: right;
	font-size: 1.7rem;
}
header #btn-x:hover,
header #btn-camera:hover{
	opacity: 0.7;
}
header #btn-camera span{
	display: inline-block;
	text-align: left;
}

header #header-form{
	position: absolute;
	right:50px;
	top:40px;
	display: none;
}
header.show_search #header-form{
	display: block;
	opacity: 0;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	animation-name: showSearchBtnFormAnimation;
}

@keyframes showSearchBtnFormAnimation {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
header #header-form div{
	position: relative;
}
header #header-form input[type="text"]{
	width: 303px;
	height: 40px;
	padding: 0 40px 0 20px;
	border: solid 1px #987b67;
	background-color: #fff;
	border-radius:  20px;
	font-size: 1.6rem;
}

header #header-form input[type="submit"]{
	position: absolute;
	top: 50%;
	right: 10px;
	width: 28px;
	min-width: 0;
	height: 28px;
	margin-top: -14px;
	padding: 0;
	background: url(../img/icon_zoom.svg) no-repeat 0 center scroll;
	box-shadow: none;
	background-size:  cover;
	color: #987b67;
}
header.pos_fix{
	height: 115px;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	animation-name: showHeaderBgAnimation;
}
@keyframes showHeaderBgAnimation {
    0% {background-color: rgba(255,255,255,0);}
    100% {background-color: rgba(255,255,255,0.8);}
}


header.pos_fix #side-box{
	top: 31px;
}

header.pos_fix > div h1 img {
	margin-top: 26px;
  }

/* footer */

footer{
	border-top:solid 1px #957a68;
	background: #e7e7e7;
}
footer > div{
	position: relative;
	min-width: 980px;
	padding: 30px 0 45px;
	border-bottom:solid 1px #957a68;
}
footer div p a:hover,
footer div > a:hover{
	text-decoration: none;
	opacity: 0.7;
}
footer div.sub-box{
	padding-bottom: 45px;
	text-align: center;
	font-size:0;
	vertical-align: middle;
}
footer div a{
	display: inline-block;
	font-size: 1.6rem;
	vertical-align: middle;
}
footer #btn-contanct-footer{
    margin-right:60px;
}
footer #btn-contanct-footer img,
footer #btn-mailmagazine-footer img{
    height: 58px;
}
footer #btn-camera-footer{
	width:40px;
	height:40px;
	margin-left: 45px;
	background: url(../img/icon_camera.svg) no-repeat 0 0 scroll;
	background-size: 40px auto;
	vertical-align:middle;
}
footer #btn-x-footer{
	height: 37px;
	width: 37px;
	margin-top: 2px;
	margin-left: 25px;
	background: url(../img/icon-x.svg) no-repeat center bottom scroll;

}
footer > ul, footer P{
	display: block;
	max-width: 1200px;
	margin: 0 auto;
}
footer > ul{
	margin-top: 25px;
	text-align: center;
	font-size: 0
}

footer > ul li{
	display: inline-block;
	margin: 0 15px 0 0;
	font-size: 1.5rem;
}
footer > P{
	padding: 15px 0;
	line-height: 1;
	text-align: center;
	font-size: 1.1rem
}
footer div p{
	text-align: center;
}
footer div p span{
	display: inline-block;
	text-align: left;
	font-size:1.7rem;
}
footer div p img{
	display: block;
	width: 308px;
	margin: 10px auto 0;
}
footer div p img.txt-footer-catch{
	width: 280px;
}

/*pankuzu */
.pankuzu{
	background: #f9f9f9;
	border-top: solid 1px #957a68;	
}
.pankuzu ul{
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px;
	font-size: 0;
}
.pankuzu ul li{
	display: inline-block;
	line-height: 1;
	font-size: 1.2rem;
}
.pankuzu ul li:after{
	display: inline-block;
	margin: 0 5px;
	content: "＞"
}
.pankuzu ul li:last-child::after{
	display: none;
}

/* contents */
section{
	position: relative;
}
section > div{
	display: block;
	max-width: 1200px;
	min-width: 980px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}





/* btn */
a[class*="btn-"]{
	display: block;
	height: 40px;
	padding: 0 35px;
	border: solid 1px #987b67;
	background-color: #fff;
	line-height: 37px;
	border-radius: 20px;
	box-sizing: border-box;
	font-size: 1.8rem;
	font-weight: normal;
}
a[class*="btn-"]:hover{
	text-decoration: none;
	
	animation-name: btnHoverAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes btnHoverAnimation {
    0% {background-color: #fff;color:#987b67}
    100% {background-color: #987b67;color:#fff}
}

a[class*="btn-"] span{
	position: relative;
	display: block;
}
a[class*="btn-"] span img{
	vertical-align: middle;
}
a[class*="btn-"] span:after,
a[class*="btn-"] span:before{
	position: absolute;
	width: 1px;
	height:12px;
	background: #987b67;
	content:"";
}
a[class*="btn-"] span:after{
	top: 50%;
	right:-15px;
	margin-top: -1px;
	transform: rotate(45deg);
}
a[class*="btn-"] span:before{
	top: 50%;
	right:-15px;
	margin-top: -9px;
	transform: rotate(-45deg);
}

a[class*="btn-"]:hover span:after,
a[class*="btn-"]:hover span:before{
	animation-name: btnHoverSpanAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes btnHoverSpanAnimation {
    0% {background-color: #987b67;}
    100% {background-color: #FFF;}
}
a[class*="btn-"]:hover span svg path{
	animation-name: btnHoverSvgAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}
@keyframes btnHoverSvgAnimation {
    0% {fill: #987b67;}
    100% {fill: #FFF;}
}
a.btn-small{
	width:176px;
}
a.btn-wide{
	width:360px;
	margin: 0 auto;
	text-align:center;
}

/* link-outer */
a[class*="link-outer"]:after{
	display: inline-block;
	width:14px;
	height:11px;
	margin: 0 0 0 10px;
	background: url(../img/icon_pop.svg) no-repeat 0 0  scroll ;
	background-size: 11px auto;
	vertical-align: middle;
	content:"";
}
.link-has-right-arrow{
	position: relative;
	display: inline-block;
	padding-right: 20px;
}
.link-has-right-arrow:after,
.link-has-right-arrow::before{
	position: absolute;
	top: 50%;
	right: 0;
	height: 1px;
	width:8px;
	background-color: #957a68;
	content:""
}
.link-has-right-arrow:after{
	margin-top: 1px;
	transform: rotate(-45deg);
}
.link-has-right-arrow::before{
	margin-top: -4px;
	transform: rotate(45deg);
}
/* link-with-arrow */

a[class*="link-with-arrow"]:after{
	display: inline-block;
	width:6px;
	height:11px;
	margin: 0 0 0 10px;
	background: url(../img/arrow-wth-link.svg) no-repeat 0 0  scroll ;
	background-size: 6px auto;
	vertical-align: middle;
	content:"";
}
/* tag  */
a.tag,
span.tag{
	position: relative;
	display: inline-block;
	padding: 4px 15px 4px 25px;
	margin-right: 10px;
	border: solid 1px #987b67;
	border-radius: 30px;
	font-size: 1.2rem;
}
a.tag::before,
span.tag::before{
	position: absolute;
	top: 4px;
	left: 10px;
	color:#987b67;
	content: "#"
}

a.tag:hover,
span.tag:hover{
	cursor: pointer;
	text-decoration: none;
	animation-name: btnTagHoverAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes btnTagHoverAnimation {
    0% {background-color: #fff;color:#987b67}
    100% {background-color: #987b67;color:#fff}
}
a.tag:hover:before,
span.tag:hover:before{
	animation-name: btnTagBeforeHoverAnimation;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes btnTagBeforeHoverAnimation {
    0% {color: #987b67}
    100% {color: #fff}
}


/* baloon-box */
.baloon-box{
	position: absolute;
	background-color: #fff;
	font-size: 1.7rem
}
.baloon-box span{
	position: relative;
	display: block;
	padding: 14px 30px 16px;
	line-height: 1;
	font-weight: 400;;
}


/* list-thumb-block */
.list-thumb-swiper {
	margin-top: 70px;
}
.list-thumb-block{
	font-size: 0;
}

.list-thumb-block li{
	position: relative;
	display: inline-block;
	width: calc((100% - 80px) / 3);
	margin: 0 40px 40px 0;
	vertical-align: top;
	font-size: 1.8rem;
}
.list-thumb-block a:hover:after{
	opacity: 0.5;
}
.list-thumb-block li:nth-child(3n){
	margin-right: 0;
}
.list-thumb-block li figure{
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0  auto!important;
	text-align: center;
}
.list-thumb-block li figure:after{
	position: absolute;
	bottom:0;
	left:0;
	z-index:10;
	opacity: 0.8;
	width:100%;
	height: 200px;
	background: rgb(112,90,75);
    background: linear-gradient(180deg, rgba(112,90,75,0) 1%, rgba(112,90,75,0.7) 35%, rgba(112,90,75,1) 100%);
	content:"";
}
.list-thumb-block li img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
}
.list-thumb-block li > a:hover{
	text-decoration: none;
	opacity: 0.8;
}
.list-thumb-block li > a{
	position: relative;
	display: block;
}
.list-thumb-block li > a label{
	position: absolute;
	top: 0;
	left: 0;
	z-index:11;
	width:176px;
	height: 35px;
	background: #957a68;
	color:#fff;
	line-height: 35px;
	text-align: center;
	font-size: 1.7rem;
}

.list-thumb-block li .txt-exp{
	position: absolute;
	z-index:11;
	bottom: 25px;
	right: 15px;
	width: calc(100% - 15px);
	color:#fff;
	text-align: right;
}
.list-thumb-block li .txt-exp > span{
	display: block;
	font-size:1.8rem;

}
.list-thumb-block li .txt-exp p{
	display: -webkit-box;
	overflow: hidden;
	padding-left: 15px;
    -webkit-line-clamp: 2;
	min-height: 42px;
    -webkit-box-orient: vertical;
	line-height: 1.4;
	font-size:1.8rem;
	text-align: left;
}
.list-thumb-block.with-tag li .txt-exp{
	bottom: 15px;
}
.list-thumb-block.with-tag li .txt-exp p{
	padding-left: 15px;
    -webkit-line-clamp: 2;
	text-align: left;
}
.list-thumb-block.with-tag li div.tag-box{
	margin-top: 10px;
	padding:0;
}
.list-thumb-block.with-tag li .tag-box span.tag{
	margin: 5px 0 0 5px;
	border-color: #fff;
	color:#fff
}
.list-thumb-block.with-tag li .tag-box span.tag:before{
	color:#fff
}

/* text-position */
.txt-center{
	text-align: center;
}
.txt-right{
	text-align: right;
}



/* pageSkipper */
#pageSkipper{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index:500;
	width: 56px;
	height: 56px;
	border: solid 1px #987b67;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	line-height: 56px;
	font-size: 1.5rem;
}
#pageSkipper:hover{
	opacity: 0.8;
	text-decoration: none;
}
#pageSkipper img{
	display: inline-block;
	width: 41px;
	font-size: 1.1rem;
}




/*  pagenation */
.pagenation{
	padding: 150px 0 150px !important;
	background-color: #f8f8f8;
}
.pagenation div{
	text-align: center;
}
.pagenation ul{
	font-size: 0;
}
.pagenation li{
	display: inline-block;
	margin: 0 10px;
	vertical-align: top;
	font-size: 1.8rem;
}
.pagenation li a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	padding: 0 !important;
	background-color: #fff;
	border: solid 1px #957a68;
	border-radius: 50%;
	line-height:  50px;
	text-align: center;
}
.pagenation li a:hover{
	background-color: #957a68;
	text-decoration: none;
	color: #fff;
	opacity: 0.7;
}
.pagenation li a.selected{
	background-color: #957a68;
	color: #fff;
}
.pagenation li a.selected:hover{
	cursor: default;
	opacity: 1;
}
.pagenation li a.btn-prev::before,
.pagenation li a.btn-prev::after,
.pagenation li a.btn-next::before,
.pagenation li a.btn-next::after{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	margin-left: -8px;
	background-color: #957a68;
	content: "";
}
.pagenation li a.btn-prev::before{
	transform: rotate(45deg);
	margin-top: 5px;
}
.pagenation li a.btn-prev::after{
	transform: rotate(-45deg);
	margin-top: -5px;
}
.pagenation li a.btn-next::before{
	transform: rotate(45deg);
	margin-top: -5px;
}
.pagenation li a.btn-next::after{
	transform: rotate(-45deg);
	margin-top: 5px;
}
.pagenation li a.btn-prev:hover::before,
.pagenation li a.btn-prev:hover::after,
.pagenation li a.btn-next:hover::before,
.pagenation li a.btn-next:hover::after{
	background-color: #ffff;
}

/* box-notfound */
.box-notfound{
	margin-top: 168px;
	padding: 160px 0 240px;
	border-top: solid 1px #957a68;
	background-color: #f0f0f0;
	text-align: center;
}
.box-notfound figure{
	display: block;
	padding-bottom: 140px;
}
.box-notfound figure img{
	width: 444px;
}
.box-notfound div.txt-massage div{
	display: inline-block;
	text-align: left;
}
.box-notfound div.txt-massage p{
	margin-bottom: 30px;
	font-size: 1.6rem;
}
.box-notfound .btn-container{
	padding-top: 120px;
}
.box-notfound .btn-container a:hover{
	opacity: 0.8;
}
.box-notfound .btn-container img{
	width: 374px;
}


/* modal */
.modal{
	position: fixed;
	top:0;
	left: 0;
	z-index: 1000;
	display:none;
	width: 100%;
	height: 100%;
}
.modal.show{
	display: block;
}
.modal-bg{
	position: fixed;
	top:0;
	left: 0;
	z-index: 1001;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-container{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1002;
	display: block;
	min-width: 300px;
	min-height: 300px;
	background-color: #f9f9f9;
	border: solid 2px #957a68;
	box-sizing: border-box;
}
.modal-header{
	position: relative;
	height: 72px;
	padding-top: 25px;
	text-align: center;
}
.modal-header img{
	width: 200px;
}
.modal-header p{
	text-align: center;
	font-size: 2.6rem;
}
.modal-header button{
	position: absolute;
	top: 25px;
	left: 25px;
	width: 28px;
	min-width: 0;
	height: 28px;
	margin:0;
	padding: 0;
	box-shadow: none;
	background: url(../img/icon_close.svg) no-repeat 0 0 scroll;
    background-size: cover;
}
.modal-header button:hover{
	opacity: 0.7;
}
.modal-body{
	position: relative;
	width: 100%;
	padding: 0 50px 50px;
	box-sizing: border-box;
	font-size: 2.0rem;
}
.modal-mailmagazine .modal-body{
	padding: 0 25px 0;
}
.modal-body .txt-notation{
	color:#cacaca;
	vertical-align: middle;
	font-size: 1.8rem;
}
.modal-body input[type="submit"],
.modal-body button{
	display: block;
	width: 538px;
	height: 58px;
	margin: 20px auto 0;
	padding: 0;
	background-color: #957a68;
	box-shadow: none;
	color: #fff;
	line-height: 58px;
	font-size: 2.0rem;
}
.modal-body button.btn-back{
	background-color: #fff;
	border: solid 1px #ccc;
	color:#957a68;
}
.modal-body input[type="submit"]:hover,
.modal-body button:hover{
	opacity: 0.7;
}
.modal-body dt{
	margin: 15px 0 10px;
	font-size: 2.0rem
}
.modal-body .txt-required{
	display: inline-block;
	margin-left: 10px;
	font-size: 1.5rem
}
.modal-body dd > div{
	margin-top: 20px;
}
.modal-body dd  span{
	display: inline-block;
	margin-right:  10px;
}
.modal-body dd  span.txt-concate{
	margin-left:  15px;
}
.modal-body input[type="text"]{
	height:58px;
	margin: 0;
	border: solid 1px #cacaca;
	line-height: 58px;
	font-size: 1.8rem;
}
.modal-body input[type="text"]::placeholder{
	color:#b3b3b3 !important;
	font-size: 1.6rem;
}
.modal-body .txt-warning{
	display: none;
	margin-top: 5px;
	padding: 2px 10px;
	background-color: #f5c5c5;
	color: #ee2c2c;
	font-size: 1.4rem;
}
.modal-body .box-for-sp{
	display: inline;
}
.modal-body input[type="text"].size-herf{
	width: 200px;
}
.modal-body input[type="text"].size-auto{
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.modal-body input[type="text"].warning{
	background-color: #fae8e8;
	border-color: #f5c5c5;
}
.modal-body .txt-footage{
	margin-top: 20px;
	color:#cacaca;
	text-align: center;
	font-size: 1.5rem;
}
.modal-body .txt-footage a{
	color:#cacaca;
	text-decoration: underline;
}
.modal-body .txt-footage a:hover{
	color:#957a68;
}

/* mordal mordal-mailmagazine */
.modal-mailmagazine .box-confirm,
.modal-mailmagazine .box-result{
	display: none;
}
.modal-mailmagazine .box-confirm dd{
	margin-bottom: 40px;
	font-size: 3.0rem;
}

/*  modal-tags  */
.modal-tags .modal-container{
	width:820px;
}
.modal-tags .box-input{
	display: block;
	margin-top: 40px;
	padding-bottom: 20px;
	text-align: center;
}
.modal-tags .box-input div{
	position: relative;
	display: inline-block;
	font-size: 0;
}
.modal-tags .box-input span{
	display: inline-block;
	margin-right: 10px;
	line-height: 58px;
    vertical-align: top;
	font-size: 1.6rem;
}
.modal-tags .box-input input[type="text"]{
	width: 440px !important;
	padding-right: 40px;
	border:none;
	font-size: 1.6rem;
}
  
.modal-tags .box-input input[type="submit"]{
	position: absolute;
	top:50%;
	right: 0;
	width:50px;
	min-width: 0;
	height: 50px;
	margin: -25px 0 0;
	padding:0;
	background: url(../img/icon_zoom-gray.svg) no-repeat center center scroll;
	background-size: 30px auto;
}
.modal-tags dl{
	display:table;
	width: 720px;
	margin: 40px auto 0;
}
.modal-tags dt{
	display: table-cell;
	width: 150px;
	padding-top: 8px;
	vertical-align: top;
	font-size: 1.6rem;
}
.modal-tags  dd{
	display: table-cell;
	padding-left: 20px;
	vertical-align: top;
}
.modal-tags .modal-customscroll{
	position: relative;
}