@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Noto+Sans+JP:wght@400;700&display=swap');
body.noscroll	{ position: fixed; width: 100%; height: 100%; left: 0; }
.header_caution, 
.header-wrap	{ display: none!important; }
.speedoFooter	{ margin: 0 auto 0!important; }
.collabo-speedo_wrapper ul:before, 
.collabo-speedo_wrapper ol:before, 
.collabo-speedo_wrapper dl:before, 
.collabo-speedo_wrapper ul:after, 
.collabo-speedo_wrapper ol:after, 
.collabo-speedo_wrapper dl:after { content: ""; display: none; }

.fadeintitle	{ animation-name: fadein; animation-duration: 1.5s; animation-iteration-count: 1; }
.fadein	{ opacity : 0; transform : translate(0, 10px); }
.fadein.scrollin	{ opacity : 1; transform: none!important; transition:all 1s; }
@keyframes fadein	{ from	{ opacity: 0; } to	{ opacity: 1; } }

#box100vh	{ width: 100%; height: 100vh; }
@media (min-width: 769px) { 
	#box100vh	{ display: none; }
}
.collabo-speedo_wrapper	{ position: relative; color:#000; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family:'Didact Gothic','Noto Sans JP', "游ゴシック",'YuGothic','Hiragino Sans',Meiryo,sans-serif; font-weight: 400; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; letter-spacing:.1rem; z-index: 3; }
.collabo-speedo_wrapper input, 
.collabo-speedo_wrapper select, 
.collabo-speedo_wrapper textarea, 
.collabo-speedo_wrapper table, 
.collabo-speedo_wrapper th, 
.collabo-speedo_wrapper td, 
.collabo-speedo_wrapper li, 
.collabo-speedo_wrapper a	{ font-family:'Didact Gothic','Noto Sans JP', "游ゴシック",'YuGothic','Hiragino Sans',Meiryo,sans-serif; font-weight: 400; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; letter-spacing:.1rem; }

.collabo-speedo_wrapper img	{ width: 100%; line-height: 1; vertical-align: bottom; }
.collabo-speedo_main	{ overflow: hidden; position: relative; width: 100%; height: 100vh; background: transparent center center / cover no-repeat; background-attachment: fixed; }
.collabo-speedo_main::before	{ background: #fff; content: ''; pointer-events: none; position: absolute; right: 0; left: 0; top: 0; bottom: 0; z-index: 1; }
.collabo-speedo_main.inview::before	{ animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards; }
.collabo-speedo_main > h1	{ position: absolute; bottom: 15%; right: 8%; width: 40%; max-width: 740px; z-index: 1; transition-delay: 1s; }
.collabo-speedo_main > h1.fadein.scrollin	{ transition-delay: 1s; }
.collabo-speedo_main_sp	{ overflow: hidden; position: relative; width: 100%; height: 100%; background: transparent; }
.collabo-speedo_main_sp::after	{ content:""; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent url(images/10.jpg) top center / cover no-repeat;  }
.collabo-speedo_main_sp::before	{ background: #fff; content: ''; pointer-events: none; position: absolute; right: 0; left: 0; top: 0; bottom: 0; z-index: 1; }
.collabo-speedo_main_sp.inview::before	{ animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards; }
.collabo-speedo_main_sp > h1	{ position: absolute; bottom: 5%; right: 10%; left: 10%; width: 80%; z-index: 1; transition-delay: 1s; }
.collabo-speedo_main_sp > h1.fadein.scrollin	{ transition-delay: 1s; }
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

/* 画面横幅が768px以上の場合 */
@media screen and (min-width: 769px) {
  .collabo-speedo_main	{ display: block; }
  .collabo-speedo_main_sp	{ display: none; }
}

/* 画面横幅が768px未満かつ、画面の縦横比が1未満の場合 */
@media screen and (max-width: 768.9px) and (max-aspect-ratio: 1/1) {
  .collabo-speedo_main	{ display: none; }
  .collabo-speedo_main_sp	{ display: block; }
}

/* 画面横幅が768px未満かつ、画面の縦横比が1以上の場合 */
@media screen and (max-width: 768.9px) and (min-aspect-ratio: 1/1) {
  .collabo-speedo_main	{ display: block; }
  .collabo-speedo_main_sp	{ display: none; }
}




.collabo-speedo_inner	{ width: 80%; min-width: 740px; max-width: 1600px; padding: 160px 20px 0; position: relative; background-color: #fff; }
.collabo-speedo_inner > h3	{ display: block; width: 100%; margin: 0 0 80px; font-size: 32px; font-size: clamp(26px, 32px, 2.4vw); line-height: 2.4; font-weight: 500; text-align: center; }
.collabo-speedo_intro	{ padding: 0 0 160px; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.collabo-speedo_intro p	{ font-size: 17px; font-size: clamp(12px, 17px, 1.7vw); line-height: 2.4; margin: 0; text-align: left; }
@media (max-width: 1300px) { 
	.collabo-speedo_inner	{ width: 90%; }
}
@media (max-width: 768.9px) { 
	.collabo-speedo_inner	{ width: 100%; min-width: 100%; }
	.collabo-speedo_inner	{ padding: 60px 0; }
	.collabo-speedo_intro	{ padding: 0 20px 60px; }
	.collabo-speedo_intro p	{ font-size: 13px; text-align: left; }
	.collabo-speedo_intro p br	{ display: none; }
}

.open_mark	{ position: absolute; right: 15px; bottom: 15px; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); z-index: 3; border: 2px solid #fff; opacity: 1; transition: all .3s; }
.open_mark::before, 
.open_mark::after	{ content: ""; display: block; width: 12px; height: 2px; background-color: #fff; position: absolute; inset: 0; margin: auto; }
.open_mark::after	{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
body.noscroll .open_mark	{ opacity: 0; }
@media (min-width: 769px) { 
	.itemset:hover .open_mark	{ opacity: 0; }
}
@media (max-width: 768.9px) { 
	.open_mark	{ right: 10px; bottom: 10px; width: 24px; height: 24px; border: 1px solid #fff; }
	.open_mark::before, 
	.open_mark::after	{ width: 8px; height: 1px; }
}

.itemsection	{ position: relative; margin: 0 0 3em; }
.itemset	{ position: relative; }
.item01	{ background: url(images/01.jpg) center center / cover no-repeat; }
.item02	{ background: url(images/02.jpg) center center / cover no-repeat; }
.item03	{ background: url(images/03.jpg) center center / cover no-repeat; }
.item04	{ background: url(images/04.jpg) center center / cover no-repeat; }
.item05	{ background: url(images/05.jpg) center center / cover no-repeat; }
.item06	{ background: url(images/06.jpg) center center / cover no-repeat; }
.item07	{ background: url(images/07.jpg) center center / cover no-repeat; }
.item08	{ background: url(images/08.jpg) center center / cover no-repeat; }
.item09	{ background: url(images/09.jpg) center center / cover no-repeat; }
.item10	{ background: url(images/10.jpg) center center / cover no-repeat; }
.item11	{ background: url(images/11.jpg) center center / cover no-repeat; }
.item12	{ background: url(images/12.jpg) center center / cover no-repeat; }
.item13	{ background: url(images/13.jpg) center center / cover no-repeat; }
.item14	{ background: url(images/14.jpg) center center / cover no-repeat; }
@media (min-width: 769px) { 
	.section01	{ padding: 10% 0; }
	.section01 .item01	{ padding: 0; width: 55%; margin: 0 0 0 45%; }
	.section01 .item02	{ padding: 0; width: 40%; position: absolute; top: 0; left: 0; }
	.section01 .item03	{ padding: 0; width: 28%; position: absolute; bottom: 0; left: 5%; }
	.section02	{ padding: 10% 0; }
	.section02 .item04	{ padding: 0; width: 55%; margin: 0 45% 0 0; }
	.section02 .item05	{ padding: 0; width: 35%; position: absolute; bottom: 0; right: 5%; }
	.section02 .item06	{ padding: 0; width: 28%; position: absolute; top: 5%; right: 0; }
	.section03	{ padding: 10% 0; }
	.section03 .item07	{ padding: 0; width: 35%; position: absolute; top: 5%; left: 0; }
	.section03 .item08	{ padding: 0; width: 60%; margin: 0 0 0 40%; }
	.section04	{ padding: 0; }
	.section04 .item09	{ padding: 0; width: 55%; margin: 0 0 0 10%; }
	.section05	{ padding: 10% 0 0; }
	.section05 .item10	{ padding: 0; width: 60%; margin: 0 0 0 40%; }
	.section05 .item11	{ padding: 0; width: 20%; position: absolute; top: 25%; left: 16%; }
	.section05 .item12	{ padding: 0; width: 28%; position: absolute; bottom: 0; left: 8%; }
	.section06	{ padding: 10% 0 0; }
	.section06 .item13	{ padding: 0; width: 50%; }
	.section06 .item14	{ padding: 0; width: 35%; position: absolute; bottom: 0; left: 55%; }
}
@media (max-width: 768.9px) { 
	.section01, 
	.section02, 
	.section03, 
	.section04, 
	.section05, 
	.section06	{ display: -webkit-flex; display: flex; flex-wrap: wrap; }
	.section01 .item01	{ padding: 0; margin: 0 0 20px; width: 100%; }
	.section01 .item02	{ padding: 0; margin: 0 20px 20px; width: 100%; }
	.section01 .item03	{ padding: 0; margin: 0; width: 60%; }
	.section02 .item04	{ padding: 0; margin: 0 0 20px; width: 100%; }
	.section02 .item05	{ padding: 0; margin: 0 20px 20px; width: 100%; }
	.section02 .item06	{ padding: 0; margin: 0 0 0 40%; width: 60%; }
	.section03 .item07	{ padding: 0; margin: 0 0 20px; width: 100%; }
	.section03 .item08	{ padding: 0; margin: 0 20px 20px; width: 100%; }
	.section04 .item09	{ padding: 0; margin: 0; width: 100%; }
	.section05 .item10	{ padding: 0; margin: 0; width: 100%; }
	.section05 .item11	{ padding: 0; margin: 0 0 20px; width: 50%; }
	.section05 .item12	{ padding: 0; margin: 0 0 20px; width: 50%; }
	.section06 .item13	{ padding: 0; margin: 0 0 20px; width: 100%; }
	.section06 .item14	{ padding: 0; margin: 0 20px 20px; width: 100%; }
}

.txtarea	{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.75); z-index: 11; transition: all .6s; display: -webkit-flex; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.txtarea.open	{ pointer-events: auto; opacity: 1; }
@media (max-width: 768.9px) { 
	.itemnoset, 
	.itemset	{ opacity: 1; transition: all .5s; }
	.itemset .txtarea	{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,.75); z-index: 11; transition: all .6s; display: -webkit-flex; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
	.itemset.open .txtarea	{ pointer-events: auto; opacity: 1; }
	body.noscroll .itemset, 
	body.noscroll .itemnoset	{ opacity: .1; }
	body.noscroll .itemset.open	{ opacity: 1; }
	.txtarea	{ position: fixed!important; top: 0x; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 999; }
	.close	{ display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 12; }
}

.close	{ display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 12; }
.close > span	{ position: absolute; top: 50px; right: 20px;  }
.close > span::before,
.close > span::after	{ display: block; content: ""; width: 50px; height: 2px; background: #fff; }
.close > span::before	{ transform: rotate(-45deg); }
.close > span::after	{ transform: rotate(45deg); }
@media (max-width: 768.9px) { 
	.close	{ display: block; }
}

.itemtxt	{ display: -webkit-flex; display: flex; flex-direction: column; padding: 1em; }
.itemtxt > div, 
.itemtxt > a	{ margin: 0; display: -webkit-flex; display: flex; flex-direction: column; position: relative; z-index: 13; padding: 10px; }
.itemtxt > div > strong, 
.itemtxt > a > strong 	{ color:#c0c0c0; font-size: clamp(13px, 15px, 1.2vw); letter-spacing:.2rem; margin: 0 0 .2em; font-weight: 700; transition: all .3s; }
.itemtxt > div > h2, 
.itemtxt > a > h2	{ margin: 0 0 10px; color:#c0c0c0; font-size: clamp(15px, 18px, 1.6vw); line-height: 1.4; margin: 0 0 .2em; font-weight: 700; transition: all .3s; }
.itemtxt > div > h2 > span, 
.itemtxt > a > h2 > span	{ display: block; width: 100%; color:#c0c0c0; font-size: clamp(13px, 15px, 1.2vw); font-weight: 700; transition: all .3s; }
.itemtxt > div > b, 
.itemtxt > a > b, 
.itemtxt > div > p, 
.itemtxt > a > p	{ width: 100%; color:#c0c0c0; font-size: clamp(13px, 15px, 1.2vw); line-height: 1.4; margin: 0 0 .2em; font-weight: 400; transition: all .3s; }
.itemtxt > div > b, 
.itemtxt > a > b	{ font-size: clamp(14px, 17px, 1.4vw); transition: all .3s; }
.btmmgn	{ margin: 0 0 3em!important; }
p.buybt	{ width: 100%; max-width: 100px; position: relative; line-height: 1; margin: .8em 0 0!important; padding: .3em; border: 1px solid #fff; display: -webkit-flex; display: flex; align-items: center; justify-content: center; overflow: hidden; }
p.buybt > span	{ color:#fff; font-size: clamp(12px, 13px, 1.1vw); font-weight: 700; letter-spacing:.2rem; position: relative; z-index: 5; transition: all .5s; }
@media (min-width: 769px) { 
	.itemtxt > a:hover > strong, 
	.itemtxt > a:hover > h2, 
	.itemtxt > a:hover > h2 > span, 
	.itemtxt > a:hover > b, 
	.itemtxt > a:hover > p, 
	.itemtxt > a:hover > b	{ color:#fff; }
	p.buybt:before	{ background: #fff; content: ''; pointer-events: none; position: absolute; right: 100%; left: 0; top: 0; bottom: 0; width: 0; height: 100%; z-index: 1; transition: all .5s; }
	a:hover p.buybt:before	{ right: 0; width: 100%; }
	a:hover p.buybt > span	{ color:#000; }
}
@media (max-width: 768.9px) { 
	.itemtxt > a > strong, 
	.itemtxt > a > h2, 
	.itemtxt > a > h2 > span, 
	.itemtxt > a > b, 
	.itemtxt > a > p, 
	.itemtxt > a > b	{ color:#fff; }
}

.lastcredit	{ width: 100%; display: -webkit-flex; display: flex; padding: 60px 0 0; margin: 0; }
.lastcredit > p	{ font-size: clamp(13px, 14px, 1vw); line-height: 1.6!important; padding: 0; margin: 0; }
@media (max-width: 768.9px) { 
	.lastcredit	{ justify-content: flex-start; padding: 0 20px; margin: 0; }
	.lastcredit > p	{ font-size: 12px; }
}

.bottomallbtn	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 0 0 160px; padding: 80px 20px 0; }
.bottomallbtn > a	{ width: 100%; position: relative; max-width: 600px; border: 2px solid #000; padding: 15px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; }
.bottomallbtn > a > span	{ color:#000; font-size: clamp(18px, 26px, 2vw); letter-spacing:.4rem; line-height: 1.4; margin: 0 0 .2em; font-weight: 700; white-space: nowrap; position: relative; z-index: 3; text-decoration: none!important; transition: all .5s; }
@media (min-width: 769px) { 
	.bottomallbtn > a::before	{ content:""; position: absolute; bottom: 0; top: 0; left: 0; right: 100%; background-color: #000; width: 0; height: 100%; transition: all .5s; }
	.bottomallbtn > a:hover::before	{ width: 100%; right: 0; }
	.bottomallbtn > a:hover > span	{ color:#fff; text-decoration: none!important; }
}
@media (max-width: 768.9px) { 
	.bottomallbtn	{ padding: 40px 20px 0; margin: 0 0 80px; }
	.bottomallbtn > a	{ padding: 10px; border: 2px solid #000; }
}


@media (max-width: 768.9px)	{ .pconly { display: none!important; } }
@media (min-width: 769px)	{ .pconly { display: block; } }
@media (max-width: 768.9px)	{ .pconlyin { display: none!important; } }
@media (min-width: 769px)	{ .pconlyin { display: inline-block; } }
@media (max-width: 768.9px)	{ .sponly { display: block; } }
@media (min-width: 769px)	{ .sponly { display: none!important; } }
.noimg	{ display: none!important; }
.delay01	{ transition-delay: 0.1s; }
.delay02	{ transition-delay: 0.2s; }
.delay03	{ transition-delay: 0.3s; }
.delay04	{ transition-delay: 0.4s; }
.delay05	{ transition-delay: 0.5s; }
.delay06	{ transition-delay: 0.6s; }
.delay07	{ transition-delay: 0.7s; }
.delay08	{ transition-delay: 0.8s; }
.delay09	{ transition-delay: 0.9s; }
.delay10	{ transition-delay: 1s; }