@charset "utf-8";
/* CSS Document */
/* TOP */
@font-face {
font-family:'Oxanium', cursive;
src: url(common/font/Oxanium-VariableFont_wght.ttf);
}
@font-face {
font-family: 'BIZ UDPGothic', sans-serif;
src: url(common/font/BIZUDPGothic-Regular.ttf);
}

 @media screen and (min-width : 901px) {/* large */
#headerbox{
background: url("img/header.png") no-repeat;
background-size: contain;
width: 100%;
height: 80px;
}

#btnlang00{
max-width: 1280px;
height: 80px;
padding: 1.7% 0 0 7.9%;
text-align: left
}

#btnlang00 img{
width: 12.5%;
}

#btnlang01{
max-width: 1280px;
height: 80px;
padding: 1.7% 0 0 7.9%;
text-align: left
}

#btnlang01 img{
width: 12.5%;
}

#footter {
background-color: #000;
padding: 2em 0 1em 0;
}

#footerbox{
text-align: center;
background-color: #000;
}

#footerbtn {
margin: 0 auto 0 auto;
}

#footeracq {
max-width: 100%;
height:auto;
padding: 0 0 0 0;
}

#footeritem002 {
max-width: 100%;
height:auto;
padding: 0 1% 1% 0;
}
#footeritem003 {
max-width: 100%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem004 {
max-width: 100%;
height:auto;
padding: 0 0 1% 0;
}

#copy {
color: #fff;
text-align: center;
margin: 3% 0 3% 0;
}

#copy p {
margin: 0;
font-size: 90%;
}

#note {
color: #fff;
text-align: center;
margin: 0;
}

#note p {
margin: 0;
font-size: 90%;
}

/*--- 配信ガイドライン  ---*/
#guideline {
background: #10181a;
opacity: 0.8;
padding: 0.5em 2em 0.5em 2em;
color: #fff;
text-align: left;
max-width: 75%;
margin: 3% auto 0 auto;
font-size: 90%;
border: 2px solid #9aafa7;

}

#guideline h4 {
margin: 0 0 -0.5em 0;
}

#guideline h3 {
font-size: 150%;
text-align:  center;
}

#guideline img {
text-align: center;
max-width: 25%;
}

.guideline_btnbox {
margin: 1em auto 0 auto;
text-align: center;
}

#guideline a:link {
color: #ffab51;
}

#guideline ul {
padding: 0 0 0 1em;
}

#guideline li {
list-style-position: outside;
padding-top:0.5em;
padding-bottom:0.5em;
list-style: none;
}

.disc{
list-style: disc !important;
list-style-position: inside;
margin: 0 0 0 1em;
}
/*--- 配信ガイドライン  ---*/

#pvbox {
max-width: 900px;
margin: 0 auto 6% auto;
}

#pv {
max-width: 890px;
margin: 0 auto 0 auto;
}


#movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 7% auto 2% auto;
border: 7px solid #9aafa7;
background: #2c3530; 
}

#movie iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 100%;
height: 100%;
margin: auto;
}

/*---↓↓↓ txt01  ↓↓↓---*/
#txt01 {
margin: 0 auto 1% auto;
width: auto;
text-align: center;
}
#txt01 img {
max-width: 80%;
}

#txt01_box {
background: rgba(38,52,46,0.8);
padding: 4%;
color: #fff;
text-align:  left;
max-width: 80%;
margin: 0 auto 0 auto;
font-size: 150%;
border: 2px solid #9aafa7;
line-height: 170%;
font-family: 'BIZ UDPGothic', sans-serif;
}

#txt02 {
margin: 3% auto 3% auto;
width: auto;
text-align: center;
}
#txt02 img {
max-width: 50%;
}
/*---↑↑↑ txt01 ↑↑↑ ---*/

/*---↓↓↓ SS  ↓↓↓---*/

#ss_box {
max-width: 100%;
display: flex;
margin: 3% auto 0 auto;
justify-content: center;
padding: 1% 5% 1% 5%;
}

#ss_box img {
border: 1px solid #9aafa7;
}

#ss01 {
max-width: 95%;
}

#ss02 {
max-width: 95%;
}


#ss03 {
max-width: 95%;
}


/*---↑↑↑ SS ↑↑↑ ---*/


/*---↓↓↓ storebtn  ↓↓↓ ---*/


.storebtn01 {
max-width: 30%;
margin: 0% 1% 0 1%;
width: 100%;
}

/*---↑↑↑ storebtn ↑↑↑ ---*/

/*---↓↓↓ topmain  ↓↓↓---*/

#topmain {
padding: 0.5em 0 0 1.7em;
font-size: 2vw;
background-image: url("img/maintop.jpg");
font-family: 'ShipporiMincho-ExtraBold';
font-weight: 700;
color: #fff;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
background-size:contain;
background-repeat: no-repeat;
text-align: left;
}

#toplogo {
margin: 22% 0 7% -6%;
max-width: 70%;
}

/*---↓↓↓ product  ↓↓↓---*/

#productbox {
padding: 1.5em 0 0 0;
font-size: 2vw;
/*background*/
font-family: 'BIZ UDPGothic', sans-serif;
color: #fff;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
background-size:contain;
background-repeat: no-repeat;
text-align: center;

}

#productbox table {
margin: 0 auto 5% auto;
width: 50%;

}
#productbox td {
padding: 2.5%;
text-align: left;
white-space: nowrap;
vertical-align: top;
}


#productttl {
text-align: center;
margin: 0 auto 0 auto;
}

#productttl img {
width: 100%;
max-width: 20%;
}

#product_txt_box {
width: 100%;
background:rgba(38,52,46, 0.7);
padding: 1em 0 1em 0;
}

#product_btnbox img{
max-width: 20%;
}

/*---↑↑↑ product ↑↑↑ ---*/
}
 @media screen and (max-width : 900px) {/* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small */

#headerbox{
background: url("img/sp_header.png") no-repeat;
background-size: contain;
}

#btnlang01{
min-width: 100%;
height: 90%;

text-align: left;
}

#btnlang01 img{
max-width: 23%;
padding: 1% 0 2% 12%;
}

/*---↓↓↓ storebtn  ↓↓↓ ---*/


.storebtn01 {
max-width: 60%;
margin: 0% 1% 0 1%;
width: 100%;
}

/*---↑↑↑ storebtn ↑↑↑ ---*/

/*---↓↓↓ topmain  ↓↓↓---*/

#topmain {
padding: 0 0 0 0.5em;
font-size: 2vw;
background-image: url("img/maintop.jpg");
font-weight: 700;
color: #fff;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
background-size:contain;
background-repeat: no-repeat;
text-align: left;
height: 100%;
}

#toplogo {
margin: 22% 0 7% -3%;
max-width: 71%;
}

#footerbox{
text-align: center;
}

#footerbtn {
margin: 0 auto 0 auto;
}

#footeritem001 {
max-width: 15%;
height:auto;
margin: 0 0 0 0;
}
#footeritem002 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem003 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}
#footeritem004 {
max-width: 15%;
height:auto;
padding: 0 0 1% 0;
}
#footeracq {
width: 15%;
height:auto;
padding: 0 0 0 0;
}

#copy {
color: #fff;
text-align: center;
margin: 5% 0 7% 0;
}

#copy p {
margin: 0;
font-size: 50%;
}

#note {
color: #fff;
text-align: center;
margin: 0 0 5% 0;
}

#note p {
margin: 0;
font-size: 50%;
}

#footter {
background-color: #000;
padding: 2em 0 1em 0;
}

#pvbox {
max-width: 900px;
padding: 0 5% 0 3%;
}

#pv {
max-width: 800px;
margin: 0 auto 0 auto;
}


#movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 7% auto 3% auto;
border: 4px solid #9aafa7; background: #000;
}

#movie iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 100%;
height: 100%;
margin: auto;
}

/*---↓↓↓ txt01  ↓↓↓---*/
#txt01 {
margin: 2% auto 2% auto;
width: auto;
text-align: center;
}
#txt01 img {
max-width: 70%;
}

#txt02 {
margin: 3% auto 4% auto;
width: auto;
text-align: center;
}
#txt02 img {
max-width: 75%;
}

#txt01_box {
background: rgba(38,52,46,0.8);
padding: 4%;
color: #fff;
text-align: left;
max-width: 80%;
margin: 0 auto 0 auto;
font-size: 90%;
border: 2px solid #9aafa7;
line-height: 170%;
font-family: 'BIZ UDPGothic', sans-serif;
}

/*---↑↑↑ txt01 ↑↑↑ ---*/

/*---↓↓↓ SS  ↓↓↓---*/

#ss_box {
max-width: 100%;
margin: 3% auto 3% auto;
justify-content: center;
padding: 5% 0 0 0;
}

#ss_box img {
border: 2px solid #9aafa7;
margin: 1% auto 1% auto;
max-width: 100%;
}

#ss01 {
}

#ss02 {
}

#ss03 {
}


/*---↑↑↑ SS ↑↑↑ ---*/

/*---↓↓↓ product  ↓↓↓---*/

#productbox {
font-size: 3vw;
/*background*/
line-height: 170%;
font-family: 'BIZ UDPGothic', sans-serif;
font-weight: 700;
color: #fff;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
background-size:contain;
background-repeat: no-repeat;
text-align: center;
}

#productbox table {
margin: 0 auto 0 auto;
width: 90%;
font-size: 100%;
}
#productbox td {
padding: 1% 0 1% 0;
text-align: left;
white-space: nowrap;
vertical-align: top;
}


#productttl {
text-align: center;
margin: 0 auto 0 auto;
}

#productttl img {
max-width: 40%;
}

#product_txt_box {
width: 100%;
background:rgba(38,52,46, 0.7);
padding: 1em 0 1em 0;
}
#product_btnbox{
margin: 1em 0 0 0;

}
#product_btnbox img{
}
/*--- 配信ガイドライン  ---*/
#guideline {
background: #10181a;
opacity: 0.8;
padding: 0.5em 2em 0.5em 2em;
color: #fff;
text-align: left;
max-width: 85%;
margin: 3% auto 0 auto;
font-size: 60%;
border: 2px solid #9aafa7;
width: 100%;
margin: 5% auto 5% auto;
}

#guideline h4 {
margin: 0 0 -0.5em 0;
}

#guideline h3 {
font-size: 120%;
text-align:  center;
}

#guideline img {
text-align: center;
max-width: 25%;
}

.guideline_btnbox {
margin: 1em auto 0 auto;
text-align: center;
}

#guideline a:link {
color: #ffab51;
}

#guideline ul {
padding: 0 0 0 1em;
}

#guideline li {
list-style-position: outside;
padding-top:0.5em;
padding-bottom:0.5em;
list-style: none;
}

.disc{
list-style: disc !important;
list-style-position: inside;
margin: 0 0 0 1em;
}
/*--- 配信ガイドライン  ---*/
}