@charset "utf-8";

/* ---------------------------------

Dela Gothic One Regular
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;

DNP ShueiMGoStd L
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 400;
font-style: normal;

DNP ShueiMGoStd B
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 600;
font-style: normal;

FOT-Chiaro Std B
font-family: "fot-chiaro-std", sans-serif;
font-weight: 700;
font-style: normal;

SeptemberN 3
font-family: "september-n", sans-serif;
font-weight: 100;
font-style: normal;

SeptemberN 5
font-family: "september-n", sans-serif;
font-weight: 500;
font-style: normal;

------------------------------------*/

/* ---------------------------------
  _01 スタイルリセット
------------------------------------*/

html { font-size: 62.5%;}
body {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	color: #333;
	background-color: #fff;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
}
@media screen and (max-width: 640px){
/* body { padding-top: 7.0rem !important;} */
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
    color: #222;}
p {
	margin: 0;
	padding: 0;
	line-height: 1.4;}
img {
	border: 0;
	display: block;}

a { text-decoration: underline; /* 必要に応じて「none」に */}
a:link { color: #222;}
a:visited { color: inherit;}
a:hover { color: red;}

ul {
	margin: 0;
	padding: 0;
	list-style: none;}
ol {
	margin: 0;
	padding: 0;}
li {
	margin: 0;
	padding: 0;}
dl, dt, dd {
	margin: 0;
	padding: 0;}
form {
	margin: 0;
	padding: 0;}

hr { display: none;}


/* ---------------------------------
  _02 基本レイアウト
------------------------------------*/

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

.bg-slider {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #ccc;
	z-index: 0;}
.bg-slider .slide-box .slide img {
	width: 100%;
	height: 100vh;
	object-fit: cover;}
@keyframes zoomUp {

0% { transform: scale(1);}
100% { transform: scale(1.15);}

}

.add-animation {
	animation: zoomUp 10s linear 0s normal both;}

main {
	margin-left: 60%;
	position: relative;
	max-width: 375px;
	background-color: #fff;
	z-index: 9999;}
aside {
	padding: 200px 0 50px 80px;
	position: fixed;
	top: 0;
	left: 0;
	width: 50%;
	box-sizing: border-box;}
aside .container {
	margin: 0 auto;
	max-width: 500px;}

}

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

main {
	width: 100%;}

.bg-slider,
aside {
	display: none;}

}

/* ---------------------------------
  _02 共通クラス
------------------------------------*/

.container {
	margin: 0 1em;}
.full .container {
	margin: 0;}

.content-box {
	padding: 1.5em;
	background-color: #fff;
	border-radius: 1em;}
.content-box p {
	margin-bottom: 1em;}

.btn {
	margin-bottom: 0;}
.btn + .btn {
	margin-top: 0.5em;}
.btn a {
	padding: 0 1em;
	display: block;
	height: 2em;
	line-height: 2em;
	color: #fff;
	font-size: 1.1em;
	text-decoration: none;
	border-radius: 0.5em;}
.btn a::after {
	margin-left: 0.5em;
	content: '';
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	background-image: url("../images/contents/arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.btn-marche a {
	background-color: #eb6c00;}
.btn-stamp a {
	background-color: #b7384e;}

.banner {
	width: 100%;}
.banner img {
	width: 100%;}

.section_title {
    display: inline-block;
	margin: 0 50% 1.0em;
    transform: translateX(-50%);
	text-align: center;
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 3.0rem;
	letter-spacing: 0.1em;}

.supplement { /* 補助的に入れる見出しを表示しないようにするクラス */
	position: absolute;
	left: -10000em;}

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

.hide_pc { display: none;}

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

.hide_sp { display: none;}

}

footer {
	padding: 2em 0;
	background-color: #c0dbf8;}
footer dl {
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;}
footer dl dt {
	margin-bottom: 0.5em;
	font-size: 1.1em;}
footer dl dd {
	margin-bottom: 0.5em;
	line-height: 1.4;}
footer .copyright {
	line-height: 1.3;
	text-align: center;}

/* ---------------------------------
  _02 コンテンツ
------------------------------------*/
	

#intro {
	padding-bottom: 2em;
	background-image: url("../images/contents/intro_bg.png");
	background-position: center bottom;}
#intro .container {
	margin: 0;}
#intro h1 {
	width: 100%;}
#intro h1 img {
	margin-bottom: 0.5em;
	width: 100%;}
#intro p {
	margin-bottom: 0.5em;
	color: #fff;
	text-align: center;font-size: 2.6rem;
	font-family: "september-n", sans-serif;
	font-weight: 500;
	font-style: normal;}
#intro p span.em01 { color: #2d5cc7;}
#intro p span.em02 { color: #167712;}
#intro p span.em03 { color: #122980;}
#intro p span.em04 { color: #56bc29;}
#intro p span.em05 { color: #f42b21;}
#intro p span.em06 { color: #ff7e00;}
#intro p span.em07 { color: #1e50a2;}

#summer {
	padding-bottom: 2em;
	background-image: url("../images/contents/summer_bg.png");
	background-position: center top;
	background-size: cover;}
#summer .container {
	margin: 0;;
	position: relative;}
#summer h2 {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 70%;
	z-index: 999;}
#summer h2 img {
	width: 100%;}
.feature_img {
	position: absolute;
	overflow: hidden;
	width: 38%;
	border-radius: 50%;}
.feature_img img {
	width: 100%;}
.feature_text {
	position: absolute;
	width: fit-content;}
.feature_text h3 {
	margin-bottom: 0.25em;
	color: #fff;
	line-height: 1.2;
	font-size: 1.2em;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	text-shadow: 0 0 5px #452108;
	letter-spacing: -0.05em;}
.feature_text .btn a {
	margin: 0 auto;
	padding: 0 0.75em;
	border: solid 3px #fff;
	display: block;
	width: fit-content;
	height: 2em;
	line-height: calc(2em - 6px);
	background-color: #ff6d0c;
	font-size: 0.9em;
	border-radius: 1em;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);}

.feature_img01 {
	top: 3.0em;
	right: 1.5em;}
.feature_text01 {
	top: 8.5em;
	right: 1em;
	transform: rotate(-4deg);}
.feature_img02 {
	top: 7.5em;
	left: 3.6em;}
.feature_text02 {
	top: 11em;
	left: 0.75em;
	transform: rotate(4deg);}
.feature_img03 {
	top: 17em;
	left: 2em;}
.feature_text03 {
	top: 22em;
	left: 0.75em;
	transform: rotate(-5deg);}
.feature_img04 {
	top: 14.0em;
	right: 2em;}
.feature_text04 {
	top: 20em;
	right: 0.75em;
	transform: rotate(-8deg);}
.feature_img05 {
	top: 27em;
	left: 4em;}
.feature_text05 {
	top: 30em;
	left: 1em;
	transform: rotate(6deg);}

#summer .okami {
	position: absolute;
	right: 1em;
	top: 26em;
	width: 50%;}
#summer .okami img {
	width: 100%;}
#summer .ibarakiyado {
	padding-top: 38em;}
#summer .ibarakiyado-box {
	margin: 0 1em;
	padding: 1em;
	border: solid 7px #ff9b0c;
	background-color: #fff;
	box-sizing: border-box;}
#summer .ibarakiyado-box h3 {
	color: #640a0a;
	font-size: 1.3em;
	font-family: "fot-chiaro-std", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;}
#summer .ibarakiyado-box p {
	margin-bottom: 0.5em;
	font-size: 0.9em;}

#acrylicstand {
	padding-top: 1em;
	background-image: url("../images/contents/acryilcstand_bg.png");
	background-position: center center;
	background-size: cover;}
#acrylicstand .container {
	padding-top: 3em;
	padding-bottom: 4em;
	position: relative;}
#acrylicstand h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;}
#acrylicstand h2 img {
	width: 100%;}
.acrylicstand-box {
	padding-bottom :4em;
	position: relative;
	width: 100%;
	background-color: #E8E7E4;
	box-shadow: 0 0 5px #999;
	z-index: 100;}
.acrylicstand-box img {
	width: 100%;}
.acrylicstand-box .acrylicstand-info {
	padding: 0.5em 1em 0.5em 6em;
	width: 75%;
	background-color: #fff;
	border-radius: 0 0.25em 0.25em 0;
	box-sizing: border-box;}
.acrylicstand-box .acrylicstand-poster {
	position: absolute;
	bottom: -0.5em; 
	left: -1.5em;
	width: 32%;}
.acrylicstand-box .acrylicstand-poster img {
	width: 100%;}
.acrylicstand-box .acrylicstand-okami {
	position: absolute;
	right: -0.75em;
	bottom: -4em;
	width: 40%;}
.acrylicstand-box .acrylicstand-okami img {
	width: 100%;}
.acrylicstand-box .acrylicstand-catch {
	position: absolute;
	left: 4.5em;
	bottom: 0.5em;}
.acrylicstand-box .acrylicstand-catch img {
	width: 60%;}
#acrylicstand .btn {
	position: absolute;
	bottom: -3em;
	left: 0;
	width: 100%;}
#acrylicstand .btn a {
	border: solid 3px #fff;
	display: block;
	width: 100%;
	height: 2em;
	line-height: calc(2em - 6px);
	background-color: #f6436d;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	border-radius: 1em;
	box-sizing: border-box;}

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

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

}

/* ---------------------------------
  _02 aside
------------------------------------*/

aside .aside-title {
	margin-bottom: 30px;}
aside .aside-title img {
	width: 100%;}
aside ul {
	margin: 0 auto;
	width: 400px;}
aside ul li {
	margin-bottom: 1em;}
aside ul li a {
	display: block;
	height: 2em;
	line-height: 2em;
	color: #fff !important;
	font-family: "september-n", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.6em;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 1.5em;}
aside ul li:nth-of-type(1) a { background-color: #ff6d0c;}
aside ul li:nth-of-type(2) a { background-color: #f6436d;}


/* ---------------------------------
  _ clearfix
------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* End hide from IE-mac */