@charset "UTF-8";

/*
■ 共通

■ ヘッダー
■ ハンバーガーメニュー
■ 導入リード
■ アイテム
■ プロフィール

■ フッター
■ ページの先頭へ

■ slick
*/



/* ■ 共通 ==================================================================================== */

/*
フォント
セクション
*/

body {
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 500;
}

@media print, screen and (min-width: 601px) {

	body {
	background-image: url('../img/Bg.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;

	}

}

#Wrapper {
display: none;
}

.ContentsWrap {
max-width: 60rem;
margin: 0 auto;
background: #fff;
}

.ContentsWrap img {
width: 100%;
height: auto; 
}

.Txt_IB {
display: inline-block;
}


/* フォント --------------------------------------------------- */

.WF1 {
font-family: 'Nunito', sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
}

.WF2 {

}


/* セクション --------------------------------------------------- */

.Item_Each {
border-radius: 7.5px;
border: 1.5px solid;
overflow: hidden;
}

.Item_Each .Dot_List_Wrap {
padding: 0.2rem 0.7rem 0.7rem 0.7rem;
border-bottom: 1.5px solid;
}

.Item_Each .Dot_List_Wrap span {
display: inline-block;
margin-right: 0.5rem;
font-size: 1rem;
line-height: 1;
vertical-align: middle;
}

.Item_Each_InBox {
padding: 2.5rem 1.5rem;
}

@media print, screen and (min-width: 768px) {

	.Item_Mds {
	width: 65%;
	margin: 0 auto;
	}

	.Icon_Share {
	display: none;
	}

}



/* ■ ヘッダー ==================================================================================== */

#Header {
position: relative;
padding-bottom: 5rem;
background: #eddeed;
overflow: hidden;
}

.Header_Curtain_Top {
position: relative;
z-index: 4;
}

.Header_Logo {
position: relative;
z-index: 4;
padding: 0 8.5%;
}

.Header_Chara {
position: relative;
z-index: 2;
margin-top: 10%;
padding: 0 3%;
}

.Header_Chara_Shadow {
margin-top: -6%;
padding: 0 18%;
}

.Header_Curtain1_Closed {
position: absolute;
left: 0;
top: 0;
z-index: 3;
}

.Header_Curtain1,
.Header_Curtain2 {
display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

.Header_Curtain1 {
z-index: 2;
}

.Header_Curtain2 {
z-index: 1;
}

.Header_Curtain1_L {
width: calc( (560 / 1080) * 100%);
}

.Header_Curtain1_R {
width: calc( (547 / 1080) * 100%);
}

.Header_Curtain2_L {
width: calc( (214 / 1080) * 100%);
}

.Header_Curtain2_R {
width: calc( (222 / 1080) * 100%);
margin-left: auto;
}

@media print, screen and (min-width: 768px) {

	.Header_Logo {
	margin-top: -12%;
	padding: 0 10%;
	}

	.Header_Chara {
	margin-top: 10%;
	padding: 0 8%;
	}

}

/* アニメーション --------------------------------------------------- */

.Header_Curtain1_Closed {
animation: curtain1_Closed 0.1s forwards;
animation-delay: 1s;
}

@keyframes curtain1_Closed {

	0% {
		visibility: visible;
	}
	
	100% {
		visibility: hidden;
	}

}

.Header_Curtain1_L {
animation: curtain1_L 70s forwards;
animation-delay: 1.1s;
}

.Header_Curtain1_R {
animation: curtain1_R 70s forwards;
animation-delay: 1.1s;
}

@keyframes curtain1_L {

	0% {
		transform: scaleX(95%) translateX(0);
	}

	10% {
		transform: scaleX(20%) translateX(-80rem);
	}
	
	100% {
		transform: scaleX(100%) translateX(-80rem);
	}

}

@keyframes curtain1_R {

	0% {
		transform: scaleX(95%) translateX(0);
	}

	10% {
		transform: scaleX(20%) translateX(80rem);
	}
	
	100% {
		transform: scaleX(100%) translateX(80rem);
	}

}

.Header_Curtain2_L {
transform: translateX(-40rem);
animation: curtain2_L 1s forwards;
animation-delay: 2.7s;
}

.Header_Curtain2_R {
transform: translateX(40rem);
animation: curtain2_R 1s forwards;
animation-delay: 2.7s;
}


@keyframes curtain2_L {

	0% {
		transform: translateX(-40rem);
	}
	
	100% {
		transform: translateX(0);
	}

}

@keyframes curtain2_R {

	0% {
		transform: translateX(40rem);
	}
	
	100% {
		transform: translateX(0);
	}

}

.Header_Chara {
animation: chara 0.5s forwards;
animation-delay: 3.6s;
}

@keyframes chara {

	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-2rem);
	}
	
	100% {
		transform: translateY(0);
	}

}



/* ■ ハンバーガーメニュー ==================================================================================== */

.FixedHamburgerMenu {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 100;
}

.Header_HamburgerMenu_Wrap {
height: 4rem;
background-color: var(--color-main2);
}

.Header_HamburgerMenu {
display: block;
position: relative;
width: 4rem;
height: 4rem;
margin: 0 0 0 auto;
background: url(../img/HamburgerMenu_Icon_Open.png) no-repeat center center;
background-size: 2.5rem auto;
font-size: 1rem;
line-height: 9rem;
text-align: center;
color: #fff;
text-indent: -9999px;
}

#GlobalNav .Header_HamburgerMenu {
background: url(../img/HamburgerMenu_Icon_Close.png) no-repeat center center;
background-size: 2.5rem auto;
}


/* グローバルナビ（GlobalNav）--------------------------------------------------- */

#GlobalNav {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
padding: 0 0 3.8rem;
background-color: var(--color-main3);
text-align: center;
}

#GlobalNavUnit {
margin-top: 4rem;
}

#GlobalNav_Menu > li:not(:first-child){
margin-top: 3.5rem;
}

.GlobalNav_Level1_Parent img {
display: inline-block;
max-width: 22rem;
margin: 0 auto;
}

.GlobalNav_Level2 li {
margin-top: 2rem;
}

.GlobalNav_Level2 a {
display: block;
font-size: 1.5rem;
color: var(--color-main1);
line-height: 1;
}

@media print, screen and (min-width: 768px) {

	#GlobalNav {
	left: 50%;
	max-width: 60rem;
	margin-left: -30rem;
	}

}


/* ■ Video ==================================================================================== */

.Video {
padding-bottom: 3rem;
border-left: 2px solid var(--color-main2);
border-right: 2px solid var(--color-main2);;
}

.hacobune-unit-video-outline {
padding: 0 !important;
}

.Video_Lead {
margin-top: 1.2rem;
font-size: 1.4rem;
line-height: 1.8em;
letter-spacing: 0.1em;
font-weight: 400;
text-align: center;
color: var(--color-main1);
}

@media print, screen and (min-width: 768px) {

	.Video {
	padding: 0 3rem 3rem;
	}

}


/* ■ 導入リード ==================================================================================== */

.MainLead {
padding: 1.2rem;
background: var(--color-main2);
}

.MainLead_InBox {
padding: 4rem 2rem 2.5rem 2rem;
border-radius: 15px;
background: #fffef8;
}

.MainLead_Logo {
max-width: 20rem;
margin: 0 auto 0 auto;
}

.MainLead_Mds1 {
margin-top: 3rem;
font-size: 2rem;
font-weight: 700;
text-align: center;
color: var(--color-main1);
line-height: 1.5em;
letter-spacing: 0.1em;
}

.MainLead_Lead {
margin-top: 2rem;
font-size: 1.3rem;
font-weight: 400;
line-height: 2.0em;
}




/* ■ アイテム・ノベルティ ==================================================================================== */

/* アイテム --------------------------------------------------- */

/*
ページ内リンク
共通
変数
*/

/*
POCHACCO
TUXEDOSAM
KEROKEROKEROPPI
BAD BADTZ-MARU
HANGYODON
AHIRUNOPEKKLE
*/

/*
NOVELTY
*/

.Item_Wrap {
padding: 3rem 2rem 2.5rem 2rem;
border-left: 2px solid var(--color-main2);
border-right: 2px solid var(--color-main2);;
}

.Item_Main_Mds {
text-align: center;
}

.Item_Main_Mds span {
display: block;
line-height: 1;
}

.Item_Main_Mds .En {
max-width: 10rem;
margin: 0 auto;
}

.Item_Main_Mds .Jp {
margin-top: 1rem;
font-size: 1.5rem;
color: var(--color-main1);
}

/* ページ内リンク */
.Item_Style_Nav {
margin: 2.5rem 0 3rem 0;
}

.Item_Style_Menu {
display: grid;
gap: 0.7rem;
grid-template-columns: repeat(3, 1fr);
}

/* 共通 */
.Item_Each:not(:first-of-type){
margin-top: 1.5rem;
}

.Item_Main {
margin-top: 2rem;
}

.Item_Main_PhotoList .slick-list.draggable {
border-radius: 15px;
border: 1.5px solid;
}

.Item_Each .slick-arrow {
top: 50% !important;
width: 15px !important;
height: 30px !important;
}

.Item_Sub {
margin-top:4rem;
}

.Item_Sub_PhotoList {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr);
}

.Item_Buy {
position: relative;
max-width: 19rem;
margin: 2rem auto 0 auto;
}

.Icon_Share {
position: absolute;
right: 0;
bottom: 0.2rem;
}

.Icon_Share a {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid;
}

.Icon_Share img {
display: inline-block;
width: 1.1rem;
height: 1.5rem;
margin-top: -0.25rem;
}

.Item_Buy_Price {
font-size: 1.5rem;
font-weight: 500;
text-align: center;
}

.Item_Buy_Price span {
display: inline-block;
margin-left: 0.2rem;
font-size: 70%;
}

.Item_Buy_Btn {
margin-top: 2rem;
}

.Item_Buy_Btn a {
display: block;
max-width: 11rem;
margin: 1rem auto 0 auto;
padding: 1rem 0;
border-radius: 30px;
font-size: 1.3rem;
font-weight: 500;
text-align: center;
color: #fff;
}

.Item_All_Btn {
margin: 2.5rem 0 3rem 0;
}

.Item_All_Btn a {
display: block;
max-width: 15rem;
margin: 0 auto;
padding: 1rem 0;
border-radius: 30px;
background: var(--color-main1);
font-size: 1.3rem;
font-weight: 500;
text-align: center;
color: #fff;
}

/* カラー */
:root {
--color-style1-main: #b5091f;
--color-style2-main: #ef8dae;
--color-style3-main: #317551;
--color-style4-main: #000;
--color-style5-main: #26b7bc;
--color-style6-main: #fabe00;
}

/* POCHACCO */
.Item_Each#Style1,
.Item_Each#Style1 .Dot_List_Wrap,
.Item_Each#Style1 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style1 .Icon_Share a {
border-color: var(--color-style1-main);
}

.Item_Each#Style1 .Dot_List_Wrap {
background: #fbdfdf;
}

.Item_Each#Style1 .Item_Buy_Price {
color: var(--color-style1-main);
}

.Item_Each#Style1 .Item_Buy_Btn a {
background: var(--color-style1-main);
}

.Item_Each#Style1 .Dot_List {
color: var(--color-style1-main);
}

.Item_Each#Style1 .slick-dots li button:before {
border: 1px solid var(--color-style1-main);
color: var(--color-style1-main);
}

.Item_Each#Style1 .slick-dots li.slick-active button:before {
background: var(--color-style1-main);
color: var(--color-style1-main);
}

.Item_Each#Style1 .slick-next:before {
background: url(../img/Style1_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style1 .slick-prev:before {
background: url(../img/Style1_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}

/* TUXEDOSAM */
.Item_Each#Style2,
.Item_Each#Style2 .Dot_List_Wrap,
.Item_Each#Style2 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style2 .Icon_Share a {
border-color: var(--color-style2-main);
}

.Item_Each#Style2 .Dot_List_Wrap {
background: #6c9bd2;
}

.Item_Each#Style2 .Item_Buy_Price {
color: var(--color-style2-main);
}

.Item_Each#Style2 .Item_Buy_Btn a {
background: var(--color-style2-main);
}

.Item_Each#Style2 .Dot_List {
color: #fff;
}

.Item_Each#Style2 .slick-dots li button:before {
border: 1px solid var(--color-style2-main);
color: var(--color-style2-main);
}

.Item_Each#Style2 .slick-dots li.slick-active button:before {
background: var(--color-style2-main);
color: var(--color-style2-main);
}

.Item_Each#Style2 .slick-next:before {
background: url(../img/Style2_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style2 .slick-prev:before {
background: url(../img/Style2_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}

/* KEROKEROKEROPPI */
.Item_Each#Style3,
.Item_Each#Style3 .Dot_List_Wrap,
.Item_Each#Style3 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style3 .Icon_Share a {
border-color: var(--color-style3-main);
}

.Item_Each#Style3 .Dot_List_Wrap {
background: #dae248;
}

.Item_Each#Style3 .Item_Buy_Price {
color: var(--color-style3-main);
}

.Item_Each#Style3 .Item_Buy_Btn a {
background: var(--color-style3-main);
}

.Item_Each#Style3 .Dot_List {
color: var(--color-style3-main);
}

.Item_Each#Style3 .slick-dots li button:before {
border: 1px solid var(--color-style3-main);
color: var(--color-style3-main);
}

.Item_Each#Style3 .slick-dots li.slick-active button:before {
background: var(--color-style3-main);
color: var(--color-style3-main);
}

.Item_Each#Style3 .slick-next:before {
background: url(../img/Style3_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style3 .slick-prev:before {
background: url(../img/Style3_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}

/* BAD BADTZ-MARU */
.Item_Each#Style4,
.Item_Each#Style4 .Dot_List_Wrap,
.Item_Each#Style4 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style4 .Icon_Share a {
border-color: var(--color-style4-main);
}

.Item_Each#Style4 .Dot_List_Wrap {
background: #fff57f;
}

.Item_Each#Style4 .Item_Buy_Price {
color: var(--color-style4-main);
}

.Item_Each#Style4 .Item_Buy_Btn a {
background: var(--color-style4-main);
}

.Item_Each#Style4 .Dot_List {
color: var(--color-style4-main);
}

.Item_Each#Style4 .slick-dots li button:before {
border: 1px solid var(--color-style4-main);
color: var(--color-style4-main);
}

.Item_Each#Style4 .slick-dots li.slick-active button:before {
background: var(--color-style4-main);
color: var(--color-style4-main);
}

.Item_Each#Style4 .slick-next:before {
background: url(../img/Style4_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style4 .slick-prev:before {
background: url(../img/Style4_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}

/* HANGYODON */
.Item_Each#Style5,
.Item_Each#Style5 .Dot_List_Wrap,
.Item_Each#Style5 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style5 .Icon_Share a {
border-color: var(--color-style5-main);
}

.Item_Each#Style5 .Dot_List_Wrap {
background: #f4b4d0;
}

.Item_Each#Style5 .Item_Buy_Price {
color: var(--color-style5-main);
}

.Item_Each#Style5 .Item_Buy_Btn a {
background: var(--color-style5-main);
}

.Item_Each#Style5 .Dot_List {
color: var(--color-style5-main);
}

.Item_Each#Style5 .slick-dots li button:before {
border: 1px solid var(--color-style5-main);
color: var(--color-style5-main);
}

.Item_Each#Style5 .slick-dots li.slick-active button:before {
background: var(--color-style5-main);
color: var(--color-style5-main);
}

.Item_Each#Style5 .slick-next:before {
background: url(../img/Style5_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style5 .slick-prev:before {
background: url(../img/Style5_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}

/* AHIRUNOPEKKLE */
.Item_Each#Style6,
.Item_Each#Style6 .Dot_List_Wrap,
.Item_Each#Style6 .Item_Main_PhotoList .slick-list.draggable,
.Item_Each#Style6 .Icon_Share a {
border-color: var(--color-style6-main);
}

.Item_Each#Style6 .Dot_List_Wrap {
background: #0068b7;
}

.Item_Each#Style6 .Item_Buy_Price {
color: var(--color-style6-main);
}

.Item_Each#Style6 .Item_Buy_Btn a {
background: var(--color-style6-main);
}

.Item_Each#Style6 .Dot_List {
color: var(--color-style6-main);
}

.Item_Each#Style6 .slick-dots li button:before {
border: 1px solid var(--color-style6-main);
color: var(--color-style6-main);
}

.Item_Each#Style6 .slick-dots li.slick-active button:before {
background: var(--color-style6-main);
color: var(--color-style6-main);
}

.Item_Each#Style6 .slick-next:before {
background: url(../img/Style6_Icon_LinkAllow.png) no-repeat !important;
background-size: 15px auto !important;
}

.Item_Each#Style6 .slick-prev:before {
background: url(../img/Style6_Icon_LinkAllowBack.png) no-repeat !important;
background-size: 15px auto !important;
}


/* ノベルティ --------------------------------------------------- */

.Novelty,
.Novelty .Dot_List_Wrap {
border-color: var(--color-main1);
}

.Novelty .Dot_List {
color: var(--color-main1);
}

.Novelty .Novelty_Mds {
max-width: 19.5rem;
margin: 0 auto;
}

.Novelty .Novelty_Cover {
margin-top: 2rem;
padding: 0 1.5rem;
}

.Novelty .Novelty_Lead {
margin-top: 2rem;
font-size: 1.3rem;
line-height: 1.8em;
}

.Novelty .ListKomeS li {
font-size: 0.9rem;
}



/* ■ プロフィール ==================================================================================== */

.Profile {
padding: 1.2rem 1.2rem 0 1.2rem;
background: var(--color-main2);
}

.Profile_InBox {
padding: 4rem 2rem 2.5rem 2rem;
border-radius: 15px;
background: #fffef8;
}

.Profile_Mds {
text-align: center;
}

.Profile_Mds span {
display: block;
line-height: 1;
}

.Profile_Mds .En {
max-width: 24.5rem;
margin: 0 auto 0 auto;
}

.Profile_Mds .Jp {
margin-top: 2rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-main1);
letter-spacing: 0.1em;
}

.Profile_Cover {
margin-top: 2.7rem;
}

.Profile_Lead {
margin-top: 2rem;
font-size: 1.3rem;
font-weight: 400;
line-height: 2.0em;
}



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

#Footer {
padding: 2.5rem 0;
background: var(--color-main2);
}

/* コピーライト */
.Footer_Copyright {
font-size: 0.9rem;
text-align: center;
color: #fff;
}



/* ■ ページの先頭へ ==================================================================================== */

#PageTop {
display: none;
position: fixed;
z-index: 3000;
}

#PageTop a {
display: inline-block;
position: relative;
border-radius: 100vh;
text-indent: -9999px;
background-color: #000;
}

#PageTop a::after {
display: block;
position: absolute;
left: 50%;
top: 50%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(-45deg);
content: '';
}

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

#PageTop {
right: 1rem;
bottom: 3rem;
}

#PageTop a {
width: 4rem;
height: 4rem;
}

#PageTop a::after {
width: 1rem;
height: 1rem;
margin-left: -0.5rem;
margin-top: -0.3rem;
}

}

@media print, screen and (min-width: 768px) {

#PageTop {
right: 2rem;
bottom: 2rem;
}

#PageTop a {
width: 6rem;
height: 6rem;
}

#PageTop a::after {
width: 1.2rem;
height: 1.2rem;
margin-left: -0.6rem;
margin-top: -0.4rem;
}

}



/* ■ JSライブラリ ==================================================================================== */

/* アニメーション --------------------------------------------------- */