@charset "Shift_JIS";

@font-face {
	font-family: 'SourceHanSansJP';
	font-display: block;
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/SourceHanSansJP/SourceHanSansJP-Regular__limited.woff2') format('woff2'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Regular__limited.woff') format('woff'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Regular__limited.otf') format('opentype');
}

@font-face {
	font-family: 'SourceHanSansJP';
	font-display: block;
	font-style: normal;
	font-weight: 500;
	src: url('./fonts/SourceHanSansJP/SourceHanSansJP-Medium__limited.woff2') format('woff2'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Medium__limited.woff') format('woff'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Medium__limited.otf') format('opentype');
}

@font-face {
	font-family: 'SourceHanSansJP';
	font-display: block;
	font-style: normal;
	font-weight: 700;
	src: url('./fonts/SourceHanSansJP/SourceHanSansJP-Bold__limited.woff2') format('woff2'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Bold__limited.woff') format('woff'),
		url('./fonts/SourceHanSansJP/SourceHanSansJP-Bold__limited.otf') format('opentype');
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +base & parts   */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#landing ol, #landing li {
	list-style: none !important;
	margin-left: 0 !important;
}

/* --- リンク画像の透過--- */
a:hover {
	opacity: .65;
	-webkit-opacity: .65;
	-moz-opacity: .65;
}

a {
	transition: opacity .2s ease-out;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ▼コンテンツ用スタイル 編集可能領域ここから▼ --------------------------------------------------------------------------------------------*/

/********************

   common

*********************/
#futagopan {
	--font-base: 'SourceHanSansJP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, sans-serif;
	--font_shippori_mincho: "Shippori Mincho", serif;
	--color-black01: #000;
	--color-gray01: #606060;
	--color-ivory01: url(../img/design/ivory01__deco.png);
	--color-pale_brown01: #c79a83;
	--color-red01: #ca0021;
	--color-wine_red01: #760021;
	--wrapper01: 980px;
	--wrapper02: 750px;
	position: relative;
	font-size: 18px;
	font-weight: 500;
	font-family: var(--font-base);
	color: var(--color-black01);
	letter-spacing: 0.1em;
}

#futagopan *,
#futagopan *::before,
#futagopan *::after {
	box-sizing: border-box;
}

#futagopan h1 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.44;
}

#futagopan h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 50px;
}

#futagopan h3 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 29px;
}

#futagopan .fv p,
#futagopan .cp_ofr p, 
#futagopan .worry p,
#futagopan .introduction p,
#futagopan .features_sec p,
#futagopan .points p,
#futagopan .movie p,
#futagopan .visual_sec p,
#futagopan .additional_points p,
#futagopan .recommended_usage_sec p,
#futagopan .compatible_sec p,
#futagopan .cs_sec p,
#futagopan .products_specification p {
	line-height: 1.8;
}

#futagopan .fv img,
#futagopan .cp_ofr img, 
#futagopan .worry img,
#futagopan .introduction img,
#futagopan .features_sec img,
#futagopan .points img,
#futagopan .movie img,
#futagopan .visual_sec img,
#futagopan .additional_points img,
#futagopan .recommended_usage_sec img,
#futagopan .compatible_sec img,
#futagopan .cs_sec img,
#futagopan .products_specification img {
	max-width: 100%;
	height: auto;
}

#futagopan figure {
	margin: 0;
}




/********************
   parts
*********************/
#futagopan .contents_wrapper {
	position: relative;
	width: 100%;
	max-width: var(--wrapper01);
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
}

#futagopan .attention_text {
	font-size: 12px;
	text-align: left;
	font-weight: 500;
	line-height: 1.6;
}

#futagopan .attention_mark {
	position: relative;
	top: 0.1em;
	margin-left: 0.04em;
	margin-right: 0.1em;
	font-size: 0.62em;
	vertical-align: top;
}

#futagopan .underline01 {
	--underline_color: var(--color-light_green01);
	position: relative;
	display: inline;
	font-size: 1.02em;
	background: linear-gradient(transparent 0%, transparent 69.6%, var(--underline_color) 69.6%, var(--underline_color) 100%);
}

#futagopan .color_red01 {
	color: var(--color-red01);
}


#futagopan .visual_sec {
	position: relative;
	padding: 0!important;
}
#futagopan .visual_sec__bg_img {
	width: 100%;
}
#futagopan .visual_sec .contents_wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translateX(-50%);
	z-index: 10;
}
#futagopan .visual_sec__heading {
	position: absolute;
	bottom: 12%;
	left: 3.6%;
	color: #fff;
	font-size: 50.6px !important;
	font-size: clamp(59.6px,4.4vw,66.9px);
	font-family: var(--font_shippori_mincho);
	line-height: 1.35;
	filter: drop-shadow(1.4px 3.5px 2.0px rgba( 0,0,0,0.44));
	letter-spacing: 0.082em;
}




/********************

   main

*********************/
#futagopan main {
	overflow: hidden;
}

#futagopan .main_section {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 76px 0 82px;
	z-index: 10;
}

#futagopan .contents_img_block {
	position: relative;
	width: 100%;
	margin: 0!important;
}
#futagopan .contents_img_block img {
	width: 100%;
}
#futagopan .contents_img_block_sec {
	width: 100%;
	padding: 0;
}

/********************
   fv
*********************/
#futagopan .fv {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 100vh;
	background: #fff;
	color: #fff;
	padding: 0;
	z-index: 5;
}

#futagopan .fv__bg img {
	width: 100%;
	max-height: 1100px;
	object-fit: cover;
	object-position: 50% 80%;
}

#futagopan .fv__inner {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	max-height: calc(100vh - 60px);
	font-size: clamp(16px, 1.25vw, 18.7px);
}

#futagopan .fv__inner img {
	width: 90%;
}

#futagopan .fv__tit {
	position: absolute;
	top: 60px;
	right: 76px;
	font-size: 2.7em;
	font-family: var(--font_shippori_mincho);
	writing-mode: vertical-rl;
	letter-spacing: 0.18em;
	filter: drop-shadow(1.4px 3.5px 2.0px rgba( 0,0,0,0.44));
}
#futagopan .fv__tit::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-41.7%) translateY(-114%);
	width: 0.69em;
	height: auto;
	aspect-ratio: 38/31;
	background-image: url(../img/design/fv__tit_deco@2x.png);
	background-repeat: no-repeat;
	background-size: contain;
	
}

#futagopan .fv__logo {
	position: absolute;
	bottom: 1.4em;
	left: 2em;
	width: 15em;
	font-size: 1em;
}

#futagopan .fv__name {
	position: absolute;
	top: 1.8em;
	left: 2.0em;
	width: 17em;
	font-size: 1em;
}





/********************
   cp_ofr
*********************/
#futagopan .cp_ofr {
	position: relative;
	padding: 100px 0 117px;
	background: var(--color-pale_brown01);
	z-index: 10;
}

#futagopan .cp_ofr__heading {
	margin: 0 auto 47px;
	text-align: center;
}

#futagopan .cp_ofr__box {
	position: relative;
	width: 100%;
	max-width: var(--wrapper02);
	height: auto;
	padding: 25px 32px 35px 20px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	border-radius: 2px;
	box-shadow: 1px 1px 7.3px rgba(0, 0, 0, 0.22);
	z-index: 10;
	box-sizing: border-box;
}


#futagopan .cp_ofr__block {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 62px;
	text-align: center;
	margin: 0 auto;
}

#futagopan .cp_ofr__sub_block {
	position: relative;
	width: 282px;
}

#futagopan .cp_ofr__sub_block img {
	width: 100%;
}

#futagopan .cp_ofr__contents_block {
	position: relative;
	width: fit-content;
}


#futagopan .cp_ofr__contents_name {
	margin: 0 0 22px;
	font-size: 31px;
	font-family: var(--font_shippori_mincho);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.44;
	text-align: left;
}

#futagopan .cp_ofr__contents_text {
	margin: 14.7px 0 0;
}

#futagopan .cp_ofr__contents_price {
	margin: 0 0 17px;
	width: fit-content;
	text-align: left;
}


#futagopan .cp_ofr .cp_ofr_btn {
	width: 100%;
	max-width: 580px;
	height: 40px;
	margin: 0 auto;
	box-shadow: 2.5px 2.5px 3.2px 0px rgba(0, 0, 0, 0.04);
}

#futagopan .cp_ofr .cp_ofr_btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 13.5px;
	font-family: var(--font-base);
	font-weight: 500;
}

#futagopan .cp_ofr_btn .btn_arrow_ {
	--size: 0.76em;
	width: var(--size);
	height: var(--size);
}



/********************
    movie
*********************/
#futagopan .movie {
	background: var(--color-ivory01);
	padding-bottom: 150px;
}
#futagopan .movie__heading {
	width: fit-content;
	margin: 0 auto 32px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.1;
	font-family: var(--font_shippori_mincho);
}

#futagopan .movie .contents_wrapper {
	max-width: var(--wrapper02);
}
#futagopan .hacobune-vjs-big-play-button{
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    font-size: 2.2em;
}
#futagopan .hacobune-vjs-big-play-button .hacobune-vjs-icon-placeholder:before{
    font-size: 2.2em;
}

/********************
    worry
*********************/
#futagopan .worry {
	position: relative;
	background: var(--color-ivory01);
	padding-bottom: 96px;
}

#futagopan .worry__list {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	column-gap: 18px;
	padding-top: 20px;
}
#futagopan .worry__list_item {
	flex: 1;
}
#futagopan .worry__list_item_tit {
	margin: 0 0 1.1em;
	color: var(--color-red01);
	text-align: center;
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#futagopan .worry__list_item_img_block {
	margin: 0 0 16px;
}
#futagopan .worry__list_item_img_block,
#futagopan .worry__list_item_img_block img {
	width: 100%;
}

#futagopan .worry__list_item_text {
	color: var(--color-gray01);
	text-align: center;
	line-height: 2.0;
}

#futagopan .worry .attention_text {
	margin-top: 3.5em;
	color: var(--color-gray01);
	text-align: right;
}


/********************
    introduction
*********************/
#futagopan .introduction {
	position: relative;
	padding: 0!important;
}
#futagopan .introduction__bg_img {
	width: 100%;
	height: auto;
}
#futagopan .introduction .contents_wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
}
#futagopan .introduction__contents {
	position: absolute;
	top: 3%;
	right: 15px;
	width: 480px;
	padding: 15px 10px 10px;
	background: #fff;
	background: url(../img/design/introduction__content_bg@2x.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#futagopan .introduction__logo {
	margin: 0 auto 12px;
	width:75%;
	
}
#futagopan .introduction__logo img {
	width: 100%;
	margin:auto;
	height:auto;
}

#futagopan .introduction__contents p {
	font-size: 17px;
	font-family: var(--font_shippori_mincho);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.04em;
}
#futagopan .introduction .design_attension_text {
	font-size: 14px;
	font-family: var(--font_shippori_mincho);
	font-weight: 700;
	line-height: 2.2;
	letter-spacing: 0em;
	position:absolute;
	bottom:10px;
	right: 10px;
}

/********************
    point
*********************/
#futagopan .points {
	position: relative;
	padding-top: 106px;
	background: var(--color-ivory01);
}

#futagopan .points__heading {
	margin: 0 auto 42px;
	text-align: center;
	font-size: 44px;
	font-family: var(--font_shippori_mincho);
	letter-spacing: 0.025em;
	line-height: 1.4;
}
#futagopan .points__heading_sub {
	display: inline-block;
	margin: 0 auto 32px;
	filter: brightness(1.02);
}

#futagopan .point {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 15px;
	margin-top: 96px;
}
#futagopan .point[data-point="03"] {
	margin-top: 150px;
}
#futagopan .point:nth-of-type(2n) {
	flex-direction: row-reverse;
}

#futagopan .point__img_block {
	position: relative;
}
#futagopan .point__num_block {
	position: absolute;
	filter: brightness(1.06);
}
#futagopan .point[data-point="01"] .point__num_block {
	bottom: 0;
	left: 0;
	transform: translateX(0%) translateY(10%);
}
#futagopan .point[data-point="02"] .point__num_block {
	bottom: 0;
	right: 0;
	transform: translateX(-3.9%) translateY(17%);
}
#futagopan .point[data-point="03"] .point__num_block {
	top: 0;
	left: 0;
	transform: translateX(-22%) translateY(-62.5%);
}

#futagopan .point__contents {
	flex: 1;
}
#futagopan .points__list {
	flex: 1;
	width:95%;
	margin:auto;
}
#futagopan .point:nth-of-type(2n+1) {
	width: 100%;
}
#futagopan .point__tit {
	position: relative;
	width: fit-content;
	width: 100%;
	margin: 0 0 47px;
	font-size: 29px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}
#futagopan .point[data-point="03"] .point__tit{
	margin: 0 0 47px 20px;
}
#futagopan .point__tit::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: auto;
	background-repeat: no-repeat;
	background-size: contain;	
}
#futagopan .point[data-point="01"] .point__tit::after {
	left: 0;
	background-image: url(../img/design/deco_kurukuru01@2x.png);
	width: 101px;
	aspect-ratio: 101/96;
	transform: translateX(-55%) translateY(29.6%);
}
#futagopan .point[data-point="02"] .point__tit::after {
	right: 0;
	background-image: url(../img/design/deco_kurukuru02@2x.png);
	width: 82px;
	aspect-ratio: 82/66;
	transform: translateX(10%) translateY(56%);
}
#futagopan .point[data-point="03"] .point__tit::after {
	left: 0;
	background-image: url(../img/design/deco_kurukuru03@2x.png);
	width: 121px;
	aspect-ratio: 121/60;
	transform: translateX(-22%) translateY(62%);
}

#futagopan .point__text {
	color: var(--color-gray01);
letter-spacing: 0.04em;
line-height: 2.25;
}
#futagopan .points .attention_text {
	margin-top: 1.5em;
}



/********************
    additional_points
*********************/
#futagopan .additional_points {
	background: var(--color-ivory01);
}

#futagopan .additional_points__heading {
	margin: 0 auto 87px;
	text-align: center;
	font-size: 44px;
	font-family: var(--font_shippori_mincho);
	letter-spacing: 0.025em;
	line-height: 1.4;
}
#futagopan .additional_points__heading_sub {
	display: inline-block;
	margin: 0 auto 25px;
	filter: brightness(1.02);
}

#futagopan .additional_point {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 35px;
	margin-bottom: 76px;
}

#futagopan .additional_point__img_block {
	width: 430px;
}

#futagopan .additional_point__contents {
	flex: 1;
	margin-right:10px;
}

#futagopan .additional_point__tit {
	position: relative;
	width: fit-content;
	margin-top: -0.2em;
	font-size: 29px;
	letter-spacing: 0.070em;
}

#futagopan .additional_point__tit::after  {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(82%) translateY(-76.9%);
	background-repeat: no-repeat;
	background-size: contain;
}

#futagopan .additional_point[data-point="01"] .additional_point__tit::after {
	background-image: url(../img/design/deco_emphasis01@2x.png);
	width: 0.92em;
	height: auto;
	aspect-ratio: 1/1;
}
#futagopan .additional_point[data-point="02"] .additional_point__tit::after {
		background-image: url(../img/design/deco_emphasis02@2x.png);
	width: 1.08em;
	height: auto;
	aspect-ratio: 32/30;
		transform: translateX(1.0%) translateY(-73.2%);
}
#futagopan .additional_point[data-point="03"] .additional_point__tit::after {
		background-image: url(../img/design/deco_emphasis03@2x.png);
	width: 0.96em;
	height: auto;
	aspect-ratio: 26/28;
	transform: translateX(17%) translateY(-44.3%);
}
#futagopan .additional_point[data-point="04"] .additional_point__tit::after {
		background-image: url(../img/design/deco_emphasis01@2x.png);
	width: 0.92em;
	height: auto;
	aspect-ratio: 1/1;
}


#futagopan .additional_point__text {
	color: var(--color-gray01);
	line-height: 2.2;
}
#futagopan .additional_point__text strong {
	font-weight: inherit;
}

/********************
    ih_contents
*********************/
#futagopan .ih_contents {
	padding-bottom: 70px;
}

/********************
    cs_sec
*********************/
#futagopan .cs_sec__heading {
	position: absolute;
	top: 6.92%;
	left: 0;
	display: block;
	padding-right: 2.0%;
	width: 100%;
	text-align: center;
	font-size: 20px;
}
#futagopan .cs_sec__heading img {
	width: 30.4%;
}

/********************
    sns_sec
*********************/
#futagopan .insta_wrap{
	padding: 100px 0;
	background:var(--color-ivory01);
}
#futagopan section.insta{
	margin: 0 auto;
	padding: 0;
}
#futagopan .insta p.letro_logo{
	right: 0;
}



/********************
    products_specification
*********************/
#products_specification {
	position: relative;
	padding: 25px 0 160px !important;
	margin: 0;
	background: var(--color-pale_brown01);
	z-index: 1;
}

#products_specification .contents_wrapper {
	position: relative;
}


#products_specification table {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
}

#products_specification caption {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: auto;
	padding: 20px 36px 22px;
	margin-bottom: 25px;
	background: var(--color-wine_red01);
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	box-sizing: border-box;
	line-height: 1.1;
	letter-spacing: 0.04em;
}

#products_specification td,
#products_specification th {
	height: auto;
	padding: 15px 10px 17px 22px;
	background: #fff;
	color: var(--color-black01);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.66;
	font-family: var(--font-base);
	border: 1.5px solid var(--color-black01);
	vertical-align: text-top;
	text-align: left;
	letter-spacing: -0.02em;
}

#products_specification th {
	background: var(--color-wine_red01);
	color: #fff;
	width: 19.6%;
	font-size: 17px;
	font-weight: 600;
}


#products_specification .attention_text {
	margin-top: 0.76em;
	font-size: 13.2px;
}



/* ▲コンテンツ用スタイル 編集可能領域ここまで▲ --------------------------------------------------------------------------------------------*/