@charset "utf-8";

/* ==========================================================================
# 共通設定
========================================================================== */
html {
  font-size: 62.5%; /* 10px */
}
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	min-width: 100%;
	color: #333333;
	/* font-family: 'Noto Sans', sans-serif; */
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
}
a {
	color: #333333;
	text-decoration: none;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
ul,
ol {
	list-style: none;
}
.cam_atena_display{
	display: none;
}
/* トップに戻るボタン
---------------------------------------------------------- */
/* PC */
.btn_top {
	position: fixed;
	width: 50px;
	height: 50px;
	right: 2%;
	bottom: 4%;
	z-index: 1000;
}
.btn_top a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.btn_top a:hover {
		opacity: 0.7;
	}
}

/* SP */
@media screen and (max-width: 750px) {
	.btn_top {
		right: calc(15 * 100vw / 550);
		bottom: calc(99 * 100vw / 550);
	}
}

/* フローティングバナー
---------------------------------------------------------- */
/* PC */
.bnr_f_discount {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 16%;
	right: 0;
	/* opacity: 0; */
	transition: .4s;
	z-index: 2;
}
/* .bnr_f_discount.is-show {
	opacity: 1;
	visibility: visible;
} */
.bnr_f_discount a img {
	width: min(calc(124 * 100vh / 1000), 104px);
	transition-duration: .3s;
	min-width: 60px;
	border-radius: 8px 0 0 8px;
}
.bnr_f_discount a:hover img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.bnr_f_discount-s {
	display: none;
}
.bnr_f_campaign {
	margin-top: 16px;
}

/* SP */
@media screen and (max-width: 750px){
	.bnr_f_discount-s {
		width: 100%;
		background: #D70C18;
		display: block;
		text-align: center;
		transition: 0.3s;
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 1000;
	}
	.bnr_f_discount-s.is-hidden {
		bottom: -84px;
	}
	.bnr_f_discount-s a {
		display: block;
	}
	.bnr_f_discount-s img {
		width: 100%;
		max-width: 550px;
		margin: 0 auto;
		vertical-align: bottom;
	}
	.bnr_f_discount {
		display: none
	}
}

/* SP・PC 表示切替え
---------------------------------------------------------- */
@media screen and (min-width: 751px){
	.is-pc { display: block; }
	.is-sp { display: none; }
}
@media screen and (max-width: 750px){
	.is-pc { display: none; }
	.is-sp { display: block; }
}

/* タグ
---------------------------------------------------------- */
#tag {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}


/* ==========================================================================
# PC
========================================================================== */

/* 共通設定
---------------------------------------------------------- */
.container {
	position: relative;
}
.contents {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.section_title {
	font-size: 3.6rem;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

/* top
---------------------------------------------------------- */
.top {
	position: relative;
}
.site_title {
	font-size: 1rem;
	margin-left: 5px;
}
.top_logo {
	position: relative;
	padding: 10px 16px 11.5px;
}



/* recommend
---------------------------------------------------------- */
/* PC・SP共通設定 */
.recommend_inner {
	background: #78B7A8;
}

/* PC設定 */
.recommend_contents.is-pc .recommend_inner {
	display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: min(calc(200 * 100vw / 1200), 200px);
    padding: min(calc(26 * 100vw / 1200), 26px) min(calc(68 * 100vw / 1200), 68px);
}
.recommend_contents.is-pc .recommend_title {
	font-size:min(calc(24 * 100vw / 1200), 24px);
	line-height: 1.67;
	font-weight: bold;
	color: #ffffff;
}
.recommend_contents.is-pc .recommend_list {
	display: flex;
    align-items: center;
    gap: 0 min(calc(32 * 100vw / 1200), 32px);
}
.recommend_contents.is-pc .recommend_item {
	width: min(calc(100 * 100vw / 1200), 100px);
}
/* .recommend_contents.is-pc .recommend_item + .recommend_item {
	margin-left: min(calc(32 * 100vw / 1200), 32px);
} */
.recommend_contents.is-pc .recommend_item-link {
	display: block;
}
.recommend_contents.is-pc .recommend_item-image {
	transition: transform .3s;
}
.recommend_contents.is-pc .recommend_item-link:hover .recommend_item-image {
	transform: scale(1.1);
}

/* entrance
---------------------------------------------------------- */
.entrance {
	position: relative;
	padding: min(calc(32 * 100vw / 1200), 32px) 0 min(calc(168 * 100vw / 1200), 51px);
}
.entrance::before,.entrance::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
    width: min(calc(600 * 100vw / 1200), 600px);
    height: 0;
    border-style: solid;
}
.entrance::before{
	left: 0;
	border-width: min(calc(100 * 100vw / 1200), 100px) 0 0 min(calc(600 * 100vw / 1200), 600px);
    border-color: transparent transparent transparent #F8F38A;
}
.entrance::after{
	right: 0;
	border-width: 0 0 min(calc(100 * 100vw / 1200), 100px) min(calc(600 * 100vw / 1200), 600px);
    border-color: transparent transparent #96DEED transparent;
}
.entrance_message {
	/* width:min(calc(552 * 100vw / 1200), 552px); */
	margin: 0 auto;
}
.entrance_text {
	font-size:2.4rem;
	line-height: 1.67;
	font-weight: bold;
	text-align: center;
}

/* theme
---------------------------------------------------------- */
.theme{
	padding-top: 62px;
	position: relative;
}
.theme::before,.theme::after{
	display: block;
	content: "";
	width:min(calc(600 * 100vw / 1200), 600px);
	height: 100%;
	position: absolute;
	z-index: -1;
}
.theme::before{
	background: #F8F38A;
	left: 0;
	top: 0;
}
.theme::after{
	background: #96DEED;
	right: 0;
	top: 0;
}
.theme_list{
	padding: min(calc(54 * 100vw / 1200), 54px) 0 min(calc(91 * 100vw / 1200), 91px);
	margin: auto;
}
.theme_inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}
.theme_item{
	transition: .3s;
}
.theme_item:not(:first-child){
	padding-left:min(calc(30 * 100vw / 1200), 30px);
}
.theme_item a{
display: block;
font-weight: 600;
line-height: 1.6;
font-size:1.6rem;
padding:2px 17px;
border-radius:30px;
border: min(calc(2 * 100vw / 1200), 2px) solid #333333;
background: #ffffff;
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
	.theme_item:hover{
		transform: translateY(-7px);
	}
}

/* design
---------------------------------------------------------- */
.design {
	/* margin-top: 44px; */
	position: relative;
}

.design .section_title{
	margin-bottom: 68px;
}
.design::before,.design::after{
	display: block;
	content: "";
	width:min(calc(600 * 100vw / 1200), 600px);
	height: 100%;
	position: absolute;
	z-index: -1;
}
.design::before{
	background: #F8F38A;
	left: 0;
	top: 0;
}
.design::after{
	background: #96DEED;
	right: 0;
	top: 0;
}
.design_inner {
	position: relative;
}
.design_box{
	padding-bottom: 100px;
}
.design_theme{
width: 560px;
margin:0 auto;
background: #ffffff;
border: 2px solid #333333;
border-radius:50px;
margin-bottom: 45px;
}
.designer_name{
	font-size: 2.4rem;
	font-weight: 600;
	position: relative;
	text-align: center;
	margin:0 auto;
	line-height: 1.67;
}
.designer_name::before,
.designer_name::after{
	content: "";
	display: block;
	background: url(../images/theme_plas.svg) no-repeat 0 0;
	width: 18px;
	height: 18px;
	position: absolute;
	top:11px;
}
.designer_name::before{
	left: 22px;
}
.designer_name::after{
	right: 22px;
}
.design_list {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0;
	z-index: 1;
}
.design_item{
	width: 50%;
}
.design_item dl{
	width: 300px;
	text-align: center;
	margin: 0 auto 0;
}
.design_item-link {
	display: block;
	transition: opacity .4s;
}
@media (hover: hover) and (pointer: fine) {
	.design_item-link:hover {
		/* opacity: .7; */
	}
}

.design_item-thumb{
	margin-bottom: 55px;
}

.design_list li:nth-child(1) .design_item-thumb,.design_list li:nth-child(2) .design_item-thumb{
	position: relative;
	z-index: 1;
}
.design_list li:nth-child(1) .design_item-thumb::before{
	content: "";
	display: inline-block;
	background: url(../images/hagaki_kage_y.png) no-repeat 0 0;
	height: 100%;
    width: 100%;
    position: absolute;
    left: -11px;
	bottom: -11px;
    z-index: -1;
}
.design_list li:nth-child(2) .design_item-thumb::before{
	content: "";
	display: inline-block;
	background: url(../images/hagaki_kage_b.png) no-repeat 0 0;
	height: 100%;
    width: 100%;
    position: absolute;
    right: -11px;
	bottom: -11px;
    z-index: -1;
}

.design_item-image {
	/* height: 480px; */
	transition: .3s;
}
.design_item-thumb::before{
	transition: .3s;
}
.design_item-detail {
	margin:0;
}
.design_item-btn {
	position: relative;
	display:flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: 12px 20px 14px 52px;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	border-radius: 10px;
	transition: .3s;
	z-index: 1;
	overflow: hidden;
}

.design_item-detail .item-btn-o::before,
.design_item-detail .item-btn-b::before{
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform-origin: 100% 50%;
	transform: scaleX(0);
	transition: transform ease .3s;
	border-radius: 10px;
}
.design_item-detail .item-btn-o{
	background: #F8A403;
}
.design_item-detail .item-btn-o::before{
	background: #EB7D18;
}
.design_item-detail .item-btn-b{
	background: #177AEF;
}
.design_item-detail .item-btn-b::before{
	background: #3B4DF0;
}
.design_item-btn .arrow_o,
.design_item-btn .arrow_b{
	height: 26px;
	width: 26px;
	display: block;
	background: #fff;
	border-radius: 50px;
	position: relative;
	margin-left: 27px;
}
.design_item-btn .arrow_o::before,
.design_item-btn .arrow_b::before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	position: absolute;
	right: 8px;
	top: 8px;
}
.design_item-btn .arrow_o::before{
	border-color: transparent transparent transparent #F8A403;
}
.design_item-btn .arrow_b::before{
	border-color: transparent transparent transparent #177AEF;
}

@media (hover: hover) and (pointer: fine) {
	/* hover hagaki */
	.design_item-thumb:hover .design_item-image{
		transform: scale(1.05);
	}
	.design_item-thumb:hover::before{
		transform: scale(1.05);
		opacity: .5;
	}

	/* hover btn */
	.design_item-btn:hover.item-btn-o::before,
	.design_item-btn:hover.item-btn-b::before{
	transform-origin: 0% 50%;
	transform: scaleX(1);
	}
	.design_item-btn:hover .arrow_o::before{
		border-color: transparent transparent transparent #EB7D18;
	}
	.design_item-btn:hover .arrow_b::before{
		border-color: transparent transparent transparent #3B4DF0;
	}
}

/* service;
---------------------------------------------------------- */
.service > div,.service .service_item-body{
	font-family: 'Meiryo', sans-serif;
}
/* 3stepアイコン、宛名無料アイコンはLPごとにデザインが異なるためLPごとに下記のファイル名で書き出してimages直下に設置してください。 */
.step_item-thumb.-step1::after {
	background: url("../images/img_step01.png");
	background-size: contain;
}
.step_item-thumb.-step2::after {
	background: url("../images/img_step02.png");
	background-size: contain;
}
.step_item-thumb.-step3::after {
	background: url("../images/img_step03.png");
	background-size: contain;
}
.service_item-ico{
	background: url("../images/img_atena-cam.png");
	background-size: contain;
}

/* サービス一覧 */

.design_feature{
	position: relative;
	padding-bottom: calc(100 * 100vw / 750);
	margin-bottom: 0;
}
.design_feature::before,
.design_feature::after{
	content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width:min(calc(600 * 100vw / 1200), 600px);
    height: 0;
    border-style: solid;
}
.design_feature::before{
	left: 0;
    border-width: min(calc(100 * 100vw / 1200),100px) 0 0 min(calc(600 * 100vw / 1200), 600px);
    border-color: transparent transparent transparent #F8F38A;
}
.design_feature::after{
	right: 0;
    border-width: 0 0 min(calc(100 * 100vw / 1200), 100px) min(calc(600 * 100vw / 1200), 600px);
    border-color: transparent transparent #96DEED transparent;
}

/* footer
---------------------------------------------------------- */
	.footer{
		position: relative;
		z-index: 1;
		background: none;
		padding-top: 110px;
	}
	.feature_bottom{
		position: relative;
		z-index: 1;
		padding: 55px 0 74px;
	}
	.feature_bottom-text,
	.feature_title,
	.feature_bottom-btn{
		font-family: 'Meiryo', sans-serif;
	}
	.footer::before,
	.footer::after,
	.feature_bottom::before,
	.feature_bottom::after{
		content: "";
		display: block;
		height: 100%;
		width: min(calc(600 * 100vw / 1200), 600px);
		position: absolute;
		top:0;
		z-index: -1;
	}
	.footer::before,
	.feature_bottom::before{
		background: #F8F38A;
		left: 0;
	}
	.footer::after,
	.feature_bottom::after{
		background: #96DEED;
		right: 0;
	}
	.feature_bottom-btn a{
		padding: min(calc(20 * 100vw / 1200), 20px) 0 min(calc(18 * 100vw / 1200), 18px);
		line-height: 2;
	}

/* パンくずリスト */
.bread_list {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 5px;
}
.bread_item {
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}
.bread_item:not(:last-child)::after {
	content: url(../images/ico_arrow_p.gif);
	padding: 0 10px;
}
.bread_item a:hover {
	text-decoration: underline;
}

/* コピーライト */
.copyright {
	font-size: 1.2rem;
	letter-spacing: 0.07em;
	padding-bottom: 20px;
	text-align: center;
}
.copyright_link {
	text-decoration: underline;
}
.copyright_link:hover {
	text-decoration: none;
}

/* ==========================================================================
# SP
========================================================================== */

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

	/* 共通設定
	---------------------------------------------------------- */
	body {
		min-width: inherit;
		margin: 0;
	}
	.contents {
		max-width: 100%;
	}
	.section_title {
		font-size: calc(60 * 100vw / 750);
		line-height: 0;
		padding: 0 calc(43 * 100vw / 750);
	}

	/* top
	---------------------------------------------------------- */
	.top_logo{
		padding: calc(15 * 100vw / 750) 17px calc(13 * 100vw / 750);
	}
	.top_logo a{
		width: calc(280 * 100vw / 750);
		display: block;
		margin-left:  calc(-5 * 100vw / 750);
	}
	.site_title {
		font-size:calc(20 * 100vw / 750);
		font-weight: 400;
		margin: 0 0 calc(6 * 100vw / 750);;
	}

	/* recommend
	---------------------------------------------------------- */
	.recommend_contents.is-sp .recommend_inner {
		padding: calc(30 * 100vw / 750) 0 calc(42 * 100vw / 750);
		overflow: hidden;
	}
	.recommend_contents.is-sp .recommend_title {
		font-size: calc(40 * 100vw / 750);
		text-align: center;
		color: #ffffff;
		margin: 0;
		font-weight: 700;
	}
	.recommend_contents.is-sp .recommend_list {
		margin-top: calc(36 * 100vw / 750);
		padding-left: calc(56 * 100vw / 750);
	}
	.recommend_contents.is-sp .recommend_item {
		padding: 0 calc(40 * 100vw / 750) calc(52 * 100vw / 750) 0;
	}
	.recommend_contents.is-sp .recommend_item-image {
		width: calc(250 * 100vw / 750);
	}
	.recommend_contents.is-sp .slick-dots {
		bottom: -22px;
		left: 0;
	}
	.recommend_contents.is-sp .slick-dots li.slick-active button:before {
		color: #2E7362;
		opacity: 1;
	}
	.recommend_contents.is-sp .slick-dots li button:before {
		color: #C5ECE2;
		opacity: 1;
		font-size:calc(32 * 100vw / 750);
	}

	.recommend_contents.is-sp .slick-dots li{
		width:calc(32 * 100vw / 750);
		height:calc(32 * 100vw / 750);
	}
	.recommend_contents.is-sp .slick-dots li:not(:last-child){
		margin-right: calc(30 * 100vw / 750);
	}
	/* entrance
	---------------------------------------------------------- */
	.entrance {
		padding: calc(51 * 100vw / 750) calc(40 * 100vw / 750) calc(102 * 100vw / 750)
	}
	.entrance::before{
		border-width: calc(130 * 100vw / 750) 0 0 calc(386 * 100vw / 750);
	}
	.entrance::after{
		border-width:0 0 calc(130 * 100vw / 750) calc(386 * 100vw / 750);
	}
	.entrance_message {
		width: 100%;
	}
	.entrance_text {
		font-size: calc(36 * 100vw / 750);
		line-height: 1.5;
		margin: 0;
	}
	.entrance_wrap {
		margin-top: calc(110 * 100vw / 750);
		background: url(../images/sp/bg_entrance.png) center center / cover no-repeat;

	}

	.entrance::after{
		border-color: transparent transparent #F8F38A transparent;
	}

	/* theme
	---------------------------------------------------------- */
	.theme{
		padding-top: calc(54 * 100vw / 750);
	}
	.theme::before{
		width: 100%;
	}
	.theme::after{
		content: none;
	}
	.theme_list{
		padding-top:calc(27 * 100vw / 750);
		padding-bottom:calc(62 * 100vw / 750);
	}
	.theme_inner{
		/* width:calc(540 * 100vw / 750); */
		justify-content: space-between;
		padding: 0 calc(102 * 100vw / 750);
	}
	.theme_inner .theme_item{
		margin:0 0 calc(60 * 100vw / 750);
		width:calc(240 * 100vw / 750);
	}
	.theme_item:not(:first-child){
		padding: 0;
	}
	.theme_inner .theme_item a{
		width: 100%;
		font-size:calc(32 * 100vw / 750);
		padding: 0 10px;
	}

	.theme_item:nth-child(1){
		/* 空 */
		order:5;
	}
	.theme_item:nth-child(2){
		/* 宝船 */
		order:4;
	}
	.theme_item:nth-child(3){
		/* お正月料理 */
		order:3;
	}
	.theme_item:nth-child(4){
		/* 富士山 */
		order:2;
	}
	.theme_item:nth-child(5){
		/* お正月遊び */
		order:1;
	}
	.theme_item:nth-child(6){
		/* 雪 */
		order:6;
	}
	.theme_item:nth-child(7){
		/* 海 */
		order:7;
	}
	.theme_item:nth-child(8){
		/* 花 */
		order:8;
	}

	/* design
	---------------------------------------------------------- */
	.design .section_title{
		margin-bottom:calc(38 * 100vw / 750);
	}
	.designer_name::before, .designer_name::after{
		display: none;
	}
	.design_inner {
		background: none;
	}
	.design::before{
		width: 100%;
	}
	.design::after{
		content: none;
	}
	.designer_name{
		font-size: calc(36 * 100vw / 750);
		line-height: 1.1;
		padding: 20px 0;
		font-weight: 600;
	}
	.design_theme{
		margin-bottom: 0;
		width: calc(640 * 100vw / 750);
	}
	.design_list {
		flex-direction: column;
		/* padding: 0 calc(80 * 100vw / 750); */
	}
	.design_item {
		width:100%;
		text-align: center;
		padding: calc(120 * 100vw / 750) 0;
	}
	.design_list .design_item:first-child{
		padding: calc(73 * 100vw / 750) 0 calc(120 * 100vw / 750);
	}
	.design_list .design_item:last-child{
		background: #96DEED;
		/* padding: calc(120 * 100vw / 750) 0; */
	}
	.design_item dl{
		width: calc(574 * 100vw  / 750);
	}
	.design_item-thumb{
		margin-bottom:calc(85 * 100vw / 750);
	}
	.design_list li:nth-child(1) .design_item-thumb::before,
	.design_list li:nth-child(2) .design_item-thumb::before{
		background-size: 100%;
	}
	.design_item-image {
		height: calc(849 * 100vw / 750);
	}

	.design_item-detail {
		margin-top: calc(20 * 100vw / 750);
	}
	.design_item-btn {
		width: calc(560 * 100vw / 750);
		font-size: calc(44 * 100vw / 750);
		text-align: left;
		padding: calc(21 * 100vw / 750) calc(53 * 100vw / 750) calc(25 * 100vw / 750) calc(98 * 100vw / 750);
		margin: auto;
	}
	.design_box{
		padding-top:calc(120 * 100vw / 750);
		padding-bottom: 0;
	}
	.design_box:nth-child(1){
		padding-top: 0;
	}
	.design_item-btn .arrow_o, .design_item-btn .arrow_b{
	width: calc(52 * 100vw / 750);
	height: calc(52 * 100vw / 750);
	margin-left: calc(49 * 100vw /750);
	}
	.design_item-btn .arrow_o::before, .design_item-btn .arrow_b::before{
		border-width: calc(10 * 100vw / 750) 0 calc(10 * 100vw / 750) calc(17 * 100vw / 750);
		transform: translateY(-50%);
		right: 30%;
		top: 50%;
	}


	/* footer
	---------------------------------------------------------- */

	.design_feature{
	padding-bottom: min(calc(100 * 100vw / 1200), 100px);
	}
	.design_feature::before{
	border-width:calc(61 * 100vw / 750) 0 0 calc(374 * 100vw / 750);
	}
	.design_feature::after{
	border-width:0 0 calc(61 * 100vw / 750) calc(374 * 100vw / 750);
	}
	.feature_list {
		padding-bottom: 10px;
	}
	.feature_bottom{
		padding-bottom: calc(135 * 100vw / 750);
	}
	.feature_bottom-btn a{
		line-height: 2.1;
	}
	.footer {
		padding-top: calc(180 * 100vw / 750);
	}

	/* パンくずリスト */
	.bread_list {
		margin-bottom: calc(5 * 100vw / 750);
	}
	.bread_item {
		font-size: calc(22 * 100vw / 750);
	}

	/* コピーライト */
	.copyright {
		font-size: calc(22 * 100vw / 750);
		padding-bottom: calc(40 * 100vw / 750);
	}

}

.messeage{
	padding:calc(72 * 100vw / 750) calc(32 * 100vw / 750);
}
@media screen and (min-width: 751px) {
    .messeage {
       padding:min(calc(100* 100vw / 1200), 100px) 0 min(calc(80* 100vw / 1200), 80px);
    }
}
/*詳細リンク　カット------------*/
:where(.design_item,.recommend_item) a{
	pointer-events: none;
  }
  .design_item-detail a,.btn_top,.btn_block{
	display: none;
  }
  .design_item-thumb:hover .design_item-image,.design_item-thumb:hover::before{
	transform: none !important;
	opacity: 1 !important;
  }