@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break: break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;
font-size:18px;
font-feature-settings: "palt";
text-align:left;
color:#fff;
background: url("../images/bg.png") fixed;
min-width:1080px;
}
@media screen and (max-width:768px){
html,body{ font-size:3.5vw; min-width:240px; max-width:768px;}
}

/*img*/
img,video{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
.shadow{ box-shadow:rgba(0, 0, 0, 1.0) 0 0 5px 2px;}

/*txt*/
.gothic{ font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#000;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}


/*ヘッダー*/
header ul{ position: absolute; left: 20px; top: 20px; text-align: center; width: 240px;}
header ul li{ margin-bottom: 20px;}
@media screen and (max-width:768px){
header ul{ left: 2.5vw; top: 2.5vw; display: flex; align-items: center;}
header ul li{ width: 50%; padding: 0 5%;}
header ul li img{ height: 5vw;}
}

/*フッター*/
footer{ background: #9c904f; overflow: hidden;}
#credit{ width: 1080px; margin: 60px auto;}
#credit h3{ width: 100%; overflow: hidden;}
#credit h3 strong{ display: inline-block; position: relative;}
#credit h3 strong:after{ content: ""; width: 1920px; height: 1px; background: #fff; position: absolute; right: -1940px; top: 50%; transform: translateY(-50%);}
#credit p{ font-size: 16px; margin-bottom: 20px;}
#credit ul{ display: flex; justify-content: center; width: calc(100% + 40px); margin: -20px 0 -20px -20px;}
#credit ul li{ width: calc((100%/6) - 40px); margin: 20px;}
#credit ul li p{ margin-bottom: 0;}
p.copyright{ text-align:center; margin:0; padding:1em; font-size:16px; letter-spacing:0.1em;}
@media screen and (max-width:768px){
#credit{ width: 95%; margin: 5% auto;}
#credit h3 strong:after{ width: 97.5vw; right: -100vw;}
#credit p{ font-size: 3vw; margin-bottom: 5%;}
#credit ul{ flex-wrap: wrap; justify-content: flex-start; width: calc(100% + 5vw); margin: 1.25vw 0 -1.25vw -2.5vw;}
#credit ul li{ width: calc((100%/3) - 5vw); margin: 1.25vw 2.5vw;}
#credit ul li p{ margin-bottom: 0;}
p.copyright{font-size: 2.5vw;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:80px auto;}
.maincontent{ padding:0; margin:0 auto; width:1080px;}
@media screen and (max-width:768px){
section{ margin: 10% auto;}
.maincontent{ width:90%;}
}
/*アニメーション*/
section{ opacity: 0;}
section.active{ animation: fade ease-in-out 1.0s forwards; animation-delay: 0.3s;}
@keyframes fade{
0%{ opacity: 0;}
100%{ opacity: 1.0;}
}

/*mv*/
#mv{ margin: 0; height: 100vh; min-height: 880px; display: flex; align-items: center; justify-content: center;}
@media screen and (max-width:768px){
#mv{ min-height: 120vw;}
}

/*mv2*/
#mv2 h2{ text-align: center; margin-bottom: 20px;}
#mv2 #mv2_in{ display: flex; align-items: center; width: 100%;}
#mv2 #mv2_in h3{ width: 120px; margin-right: 20px;}
#mv2 #mv2_in #mv2_box{ width: calc(100% - 140px);}
#mv2 #mv2_in #mv2_box ul{ width: calc(100% + 10px); margin: -10px 0 -5px -10px; display: flex; flex-wrap: wrap;}
#mv2 #mv2_in #mv2_box ul li{ width: calc(52.5% - 10px); margin: 10px 5px;}
#mv2 #mv2_in #mv2_box ul li:first-child{ width: calc(100% - 10px);}
#mv2 #mv2_in #mv2_box ul li:nth-child(2n){ width: calc(47.5% - 10px);}
#mv2 #mv2_in #mv2_box dl{ display: flex; width: 100%;}
#mv2 #mv2_in #mv2_box dl dt{ width: 40px; display: flex; align-items: center; justify-content: center; background: #9c904f; color: #000; font-size: 24px;}
#mv2 #mv2_in #mv2_box dl dd{ width: calc(100% - 50px); margin-left: 10px;}
#mv2 #mv2_in #mv2_box dl dd h4{ color: #9c904f; font-size: 24px;}
#mv2 #mv2_in #mv2_box dl dd h5{ font-size: 16px;}
@media screen and (max-width:768px){
#mv2 h2{ margin: 5% auto;}
#mv2 h2 img{ width: 75%;}
#mv2 #mv2_in{ width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#mv2 #mv2_in h3{ width: 20%; margin-right: 2.5%;}
#mv2 #mv2_in #mv2_box{ width: 77.5%;}
#mv2 #mv2_in #mv2_box ul{ width: 100%; margin: 0;}
#mv2 #mv2_in #mv2_box ul li{ width: 100%; margin: 1.25% auto;}
#mv2 #mv2_in #mv2_box ul li:first-child{ width: 100%;}
#mv2 #mv2_in #mv2_box ul li:nth-child(2n){ width: 100%;}
#mv2 #mv2_in #mv2_box dl dt{ width: 5vw; font-size: 3vw;}
#mv2 #mv2_in #mv2_box dl dd{ width: calc(100% - 6.25vw); margin-left: 1.25vw;}
#mv2 #mv2_in #mv2_box dl dd h4{ font-size: 3.5vw;}
#mv2 #mv2_in #mv2_box dl dd h5{ font-size: 2.75vw;}
}

/*info*/
#info .maincontent{ position: relative; padding: 20px;}
#info .maincontent:before{ content: ""; background: url("../images/tit_ico.png") center center no-repeat; background-size: 100%; width: 336px; height: 336px; position: absolute; left: -360px; top: 50%; transform: translateY(-50%);}
#info .maincontent:after{ content: ""; background: url("../images/tit_ico.png") center center no-repeat; background-size: 100%; width: 336px; height: 336px; position: absolute; right: -360px; top: 50%; transform: translateY(-50%) rotateY(180deg);}
#info .maincontent h2{ font-size: 72px; line-height: 1.33em; text-align: center;}
#info .maincontent h2 strong{ display: inline-block; background: #9c904f; color: #000; padding: 0 0.25em; margin: 0.25em 0.25em 0 0;}
#info .maincontent h2:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 40px 0 0; border-color: #9c904f transparent transparent transparent; position: absolute; left: 0; top: 0;}
#info .maincontent h2:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent #9c904f transparent; position: absolute; right: 0; bottom: 0;}
@media screen and (max-width:768px){
#info .maincontent{ padding: 2.5% 0;}
#info .maincontent:before{ width: 22.5vw; height: 22.5vw; left: -22.5vw;}
#info .maincontent:after{ width: 22.5vw; height: 22.5vw; right: -22.5vw;}
#info .maincontent h2{ font-size: 7.5vw;}
#info .maincontent h2:before{ border-width: 5vw 5vw 0 0;}
#info .maincontent h2:after{ border-width: 0 0 5vw 5vw;}
}

/*sample*/
#sample .maincontent{ max-width: 800px;}
.youtube{ position:relative; width:100%; padding-top:56.25% !important; border: 8px solid #fff; border-left: 8px solid #9c904f; border-top: 8px solid #9c904f; box-shadow:rgba(0, 0, 0, 1.0) 0 0 5px 2px;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}
@media screen and (max-width:768px){
.youtube{ border-width: 0.75vw;}
}

/*creator*/
#creator .maincontent{ background: rgba(0,0,0,0.75); color: #000; padding: 40px;}
#creator h2{ text-align: center; font-size: 48px; color: #9c904f; padding: 10px; margin-bottom: 40px; position: relative;}
#creator h2:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 40px 0 0; border-color: #9c904f transparent transparent transparent; position: absolute; left: 0; top: 0;}
#creator h2:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent #9c904f transparent; position: absolute; right: 0; bottom: 0;}
#creator h4{ text-align: center; color: #9c904f; font-size: 36px; line-height: 1em; margin: 60px auto 40px; overflow: hidden;}
#creator h4 strong{ display: inline-block; position: relative;}
#creator h4 strong:before{ content: ""; width: 640px; height: 2px; background: #9c904f; position: absolute; left: -660px; top: 50%; transform: translateY(-50%);}
#creator h4 strong:after{ content: ""; width: 640px; height: 2px; background: #9c904f; position: absolute; right: -660px; top: 50%; transform: translateY(-50%);}
#creator ul{ display: flex; flex-wrap: wrap; width: calc(100% + 40px); margin: -20px 0 -20px -20px;}
#creator ul li{ width: calc(50% - 40px); margin: 20px; padding: 20px; border: 2px solid #fff; border-left: 2px solid #9c904f; border-top: 2px solid #9c904f; background: rgba(255,255,255,0.9);}
#creator ul li h3{ font-size: 24px; color: #9c904f; border-bottom: 1px solid #9c904f; margin-bottom: 10px;}
#creator ul li h3 span{ font-size: 80%;}
#creator dl{ display: flex; width: 100%;}
#creator dl dt{ width: 120px;}
#creator dl dd{ width: calc(100% - 140px); margin-left: 20px;}
#creator dl dd p{ font-size: 16px; line-height: 1.5em;}
#creator dl dt figure img{ box-shadow:rgba(0, 0, 0, 0.1) 0 0 5px 2px;}
#creator ul.sns{ width: calc(100% + 10px); margin: 5px 0 0 -5px; justify-content: center;}
#creator ul.sns li{ width: auto; margin: 0 5px; padding: 0; border: none; box-shadow: none; font-size: 21px; line-height: 1em; color: #9c904f; background: none;}
/*紹介文無し*/
#creator ul li.min{ width: calc(33.33% - 40px); margin: 20px; padding: 20px;}
#creator ul li.min dl dt{ width: 100%;}
#creator ul li.min dl dt img{ width: 120px;}
#creator ul li.min dl dd{ display: none;}
@media screen and (max-width:768px){
#creator .maincontent{ width: 95%; padding: 2.5%;}
#creator h2{ font-size: 6.25vw; padding: 1.25%; margin-bottom: -3.75vw;}
#creator h2:before{ border-width: 5vw 5vw 0 0;}
#creator h2:after{ border-width: 0 0 5vw 5vw;}
#creator h4{ font-size: 5vw; margin: 10% auto 5%;}
#creator h4 strong:before{ width: 50vw; left: -52.5vw;}
#creator h4 strong:after{ width: 50vw; right: -52.5vw;}
#creator ul{ width: calc(100% + 5vw); margin: -2.5vw 0 -2.5vw -2.5vw;}
#creator ul li{ width: calc(100% - 5vw); margin: 2.5vw; padding: 2.5%;}
#creator ul li h3{ font-size: 3.75vw; margin-bottom: 2.5vw;}
#creator dl dt{ width: 27.5%;}
#creator dl dd{ width: 70%; margin-left: 2.5%;}
#creator dl dd p{ font-size: 3vw;}
#creator ul.sns{ display: flex; width: calc(100% + 2.5vw); margin: 1.25vw 0 0 -1.25vw;}
#creator ul.sns li{ margin: 0 1.25vw; font-size: 4.5vw;}
/*紹介文無し*/
#creator ul li.min{ width: calc(50% - 5vw); margin: 2.5vw;}
#creator ul li.min dl dt{ width: 100%;}
#creator ul li.min dl dt img{ width: 22.5vw;}
#creator ul li.min dl dd{ display: none;}
}
/*アニメーション*/
#creator ul li{ opacity: 0; position: relative;}
#creator ul li.active{ animation: creator ease-in-out 0.3s forwards; animation-delay: 0.3s;}
#creator ul.sns li{ opacity: 1.0 !important; top: 0 !important;}
#creator ul.sns li.active{ animation: creator2 ease-in-out 0s forwards; animation-delay: 0s;}
@keyframes creator{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}



/*tweet*/
#tweet .maincontent{ background: rgba(0,0,0,0.75); color: #000; padding: 40px 40px 80px;}
#tweet h2{ text-align: center; font-size: 48px; color: #9c904f; padding: 10px; margin-bottom: 40px; position: relative;}
#tweet h2 strong{ background: #9c904f; color: #000; padding: 0 0.5em 0.125em;; margin-right: 0.5em;}
#tweet h2:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 40px 0 0; border-color: #9c904f transparent transparent transparent; position: absolute; left: 0; top: 0;}
#tweet h2:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent #9c904f transparent; position: absolute; right: 0; bottom: 0;}
#tweet p.lead{ text-align: center; color: #fff;}
/*
#tweet ul{ display: flex; flex-wrap: wrap; width: calc(100% + 40px); margin: -20px 0 -20px -20px;}
#tweet ul li{ width: calc(50% - 40px); margin: 20px; padding: 20px; border: 2px solid #fff; border-left: 2px solid #9c904f; border-top: 2px solid #9c904f; background: rgba(255,255,255,0.9);}
*/
#tweet ul li{ padding: 20px; border: 2px solid #fff; border-left: 2px solid #9c904f; border-top: 2px solid #9c904f; background: rgba(255,255,255,0.9);}
#tweet dl{ display: flex;}
#tweet dl dt{ width: 48px;}
#tweet dl dt img{ border-radius: 50%;}
#tweet dl dd{ width: calc(100% - 60px); margin-left: 12px;}
#tweet dl dd p.name{ font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #000; font-size: 16px;}
#tweet dl dd p.name span{ font-weight: normal; color: #999; margin-left: 0.5em; font-size: 75%; line-height: 1.25em;}
#tweet dl dd p.name a:hover strong{ text-decoration: underline;}
#tweet dl dd p.txt{ font-size: 16px; line-height: 1.5em;}
#tweet dl dd figure.img img{ width: 100%; height: 240px; object-fit: cover;}
#tweet figure.btn{ margin-top: 20px;}
#tweet figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #9c904f; color: #fff;}
#tweet figure.btn a i{ margin-right: 0.5em;}
@media screen and (max-width:768px){
#tweet .maincontent{ width: 95%; padding: 5% 5% 10%;}
#tweet h2{ font-size: 6.2vw; padding: 1.25%; margin-bottom: 5%;}
#tweet h2:before{ border-width: 5vw 5vw 0 0;}
#tweet h2:after{ border-width: 0 0 5vw 5vw;}
#tweet p.lead{ text-align: center; color: #fff;}
#tweet ul li{ padding: 2.5vw; margin: 0 0.625vw; width: calc(100% + 1.25vw);}
#tweet dl dt{ width: 10%;}
#tweet dl dt img{ width: 100%;}
#tweet dl dd{ width: 87.5%; margin-left: 2.5%;}
#tweet dl dd p.name{ margin-bottom: 1.25%; padding-bottom: 1.25%;}
#tweet dl dd p.txt{ font-size: 3vw;}
#tweet dl dd figure.img img{ height: 40vw;}
#tweet figure.btn{ margin-top: 2.5%;}
#tweet figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #9c904f; color: #fff;}
#tweet figure.btn a i{ margin-right: 0.5em;}
}

/*slider*/
#tweet .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom: -32px;}
#tweet .bx-wrapper .bx-prev { left: -68px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 24px; font-weight: bold; line-height: 1; background: #9c904f; color: #fff; border-radius: 50%;}
#tweet .bx-wrapper .bx-next { right: -68px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 24px; font-weight: bold; line-height: 1; background: #9c904f; color: #fff; border-radius: 50%;}
#tweet .bx-wrapper .disabled{ opacity: 0; pointer-events: none;}
@media screen and (max-width:768px){
#tweet .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom: -5vw;}
#tweet .bx-wrapper .bx-prev { left: -5vw; width: 7.5vw; height: 7.5vw; font-size: 3.75vw;}
#tweet .bx-wrapper .bx-next { right: -5vw; width: 7.5vw; height: 7.5vw; font-size: 3.75vw;}
}

/*tweet_btn*/
.tweet_btn a{ display: flex; align-items: center; justify-content: center; margin: 20px auto 40px; width: 480px; padding: 0.5em; letter-spacing: 0.1em; background: rgb(29, 155, 240); color: #fff; border-radius: 2em;}
.tweet_btn a strong{ background: #fff; color: rgb(29, 155, 240); padding: 0 0.25em; margin: 0 0.5em;}
@media screen and (max-width:768px){
.tweet_btn a{ margin: 2.5% auto 7.5%; width: 100%;}
}

/*foot_img*/
#footer_img{ background: url("../images/foot_img.png") center center no-repeat; background-size: cover; width: 1080px; height: 660px;}
@media screen and (max-width:768px){
#footer_img{ background: none; width: 100%; height: auto;}
}



/*buy*/
#buy .maincontent{ background: rgba(0,0,0,0.75); color: #000; padding: 40px;}
#buy h2{ text-align: center; font-size: 36px; color: #fff; margin-bottom: 40px; overflow: hidden;}
#buy h2 strong{ display: inline-block; position: relative;}
#buy h2 strong:before{ content: ""; width: 240px; height: 1px; background: #fff; position: absolute; left: -280px; top: 50%;}
#buy h2 strong:after{ content: ""; width: 240px; height: 1px; background: #fff; position: absolute; right: -280px; top: 50%;}
#buy ul{ display: flex; align-items: center; justify-content: center; margin: auto;}
#buy ul li{ margin: 0 20px; width: 240px;}
#buy ul li a{ display: flex; align-items: center; justify-content: center; width: 240px; height: 84px;}
#buy ul li:nth-child(2) a{ background: #fff;}
#buy ul li:nth-child(2) a img{ height: 64px;}
#buy ul li a:hover{ transform: scale(1.1);}
@media screen and (max-width:768px){
#buy .maincontent{ width: 95%; padding: 2.5%;}
#buy h2{ font-size: 4.5vw; margin-bottom: 5%;}
#buy h2 strong:before{ width: 10vw; left: -12.5vw;}
#buy h2 strong:after{ width: 10vw; right: -12.5vw;}
#buy ul li{ margin: 0 2.5vw; width: calc(100% - 5vw);}
#buy ul li a{ width: 100%; height: 13.75vw;}
#buy ul li:nth-child(2) a img{ height: 10vw;}
}




@media print, screen and (min-width:769px){
.smp{ display:none !important;}
}
@media screen and (max-width:768px){
.pc{ display:none !important;}
}