//@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amiri');
@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

* {
padding:0;
margin:0;
outline:none;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:600;
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#111111;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
background:#e9d8d8;
text-align: center;
}

// スマホのスクロールをスムーズに
html {
-webkit-overflow-scrolling:touch;
}

a {
color:#111111;
text-decoration:none;
transition:all 0.1s linear;
&:hover {
animation-name:delay;
animation-duration:0.2s;
transition:all 0.2s linear;
}
}
@keyframes delay {
0% {
opacity:0.5;
}
100% {
opacity:1;
}
}

ul {
list-style:none;
padding:0;
}


// Font Awesome 
@mixin ICON {
//font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";
font-family:"Line Awesome Free","Line Awesome Brands";
font-weight:900;
}

// Noto Sans JP
@mixin SANS {
font-family:"Noto Sans JP";
font-weight:100;
}

// Noto Serif JP
@mixin SERIF {
font-family: 'Shippori Mincho';
font-weight:400;
}

// Montserrat
@mixin MON {
font-family:"Montserrat";
}

// DM+Sans
@mixin DM {
font-family: "DM Sans";
font-weight:600;
}

// Amiri
@mixin Amiri {
font-family: "Amiri";
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$black:#000000;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$pink:#e9d8d8;
$red:#DF0000;


// 全体の読み込みをふわっと
body {
-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}


// h1を消すやつ
h1{display: none;}



// ローディング
// ローディング
// ローディング
#splash {
/*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:$pink;
text-align:center;
color:#fff;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash_logo img {
width:10%;
}
@media screen and (max-width:30rem) {
#splash_logo img {
width:30%;
}
}



// 看板
// 看板
// 看板
.KANBAN-CONTAINER{
width: calc(100% - 2px);
display: flex;
flex-wrap: wrap;
overflow: hidden;
.PHOTO{width:calc(45% - 2px);
margin:1px 1px -6px 1px;
overflow: hidden;
position: relative;
img{width:100%;}
}
.KANBAN{width:55%;
overflow: hidden;
position: relative;
padding:20% 0;
.logo{width:12%;
margin:5% auto;
img{width:100%;}}
.title{
color: $black;
@include Amiri;}
.subtitle{
color: $black;
@include Amiri;}
}
}
@media screen and (max-width:30rem) {
.KANBAN-CONTAINER{
width: calc(100% - 2px);
display: block;
.PHOTO{width:calc(100% - 2px);
margin:1px 1px -6px 1px;
overflow: hidden;
position: relative;
img{width:100%;}
}
.KANBAN{width:100%;
overflow: hidden;
position: relative;
padding:15% 0;
.logo{width:20%;
margin:5% auto;
img{width:100%;}}
}
}
}



// 画像（POINT）
// 画像（POINT）
// 画像（POINT）
.IMG-CONTAINER-POINT{
width: 100%;
background-color: $pink;
position: relative;
.PHOTO{width:40%;
position: relative;
margin:20% auto 12%;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-POINT{
.PHOTO{width:calc(100% - 2px);
margin:20% auto;
img{width:100%;}
}
}
}
.MARU-POINT-01,.MARU-POINT-02,.MARU-POINT-03,{
z-index: 99;
position: absolute;
border-radius:50%;
border:6px solid $pink;
width:16%;
height:30%;
background-size:cover;
background-position:50%;
.MARU-LINE{
position: absolute;
border: 0;
border-top: 2px solid $pink;
margin: 0;
padding: 0;
transform-origin: 0% 0%;
}
p{position: absolute;
bottom:0;
width:70%;
height:40%;
border-radius:0 0 50% 50% /0 0 100% 100%;
color:$white;
font-size: 0.8rem;
padding:0 15%;
line-height: 1.4rem;
span{
font-size: 1.2rem;
@include Amiri;
display:block;
padding:3% 0;
}}
}
@media screen and (max-width:30rem) {
.MARU-POINT-01,.MARU-POINT-02,.MARU-POINT-03,{
border:4px solid $pink;
width:40%;
height:28%;
.MARU-LINE{border-top: 1px solid $pink;}
p{width:70%;
height:40%;
font-size: 0.6rem;
padding:0 15%;
line-height: 0.8rem;
span{
font-size: 0.7rem;
padding:2% 0;
}}
}
}

.MARU-POINT-01{
top:-10%;
right:20%;
background-image:url("https://image.rakuten.co.jp/crouka/cabinet/topics/2023ss_sozai/23ss_or_detail_2.jpg");
//線
.MARU-LINE{
position: absolute;
top: 65%;
left: 0%;
transform: rotate(155deg);
width: 93%;
}
}
@media screen and (max-width:30rem) {
.MARU-POINT-01{
top:-10%;
right:0%;
//線
.MARU-LINE{
top: 85%;
left: 12%;
transform: rotate(135deg);
width: 50%;
}
}
}

.MARU-POINT-02{
top:20%;
left:20%;
background-image:url("https://image.rakuten.co.jp/crouka/cabinet/topics/2023ss_sozai/23ss_or_detail_1.jpg");
//線
.MARU-LINE{
position: absolute;
top: 25%;
right: -75%;
transform: rotate(-35deg);
width: 80%;
}
}
@media screen and (max-width:30rem) {
.MARU-POINT-02{
top:20%;
left:0;
//線
.MARU-LINE{
top: 5%;
right: -10%;
transform: rotate(-40deg);
width: 35%;
}
}
}

.MARU-POINT-03{
bottom:-10%;
right:20%;
background-image:url("https://image.rakuten.co.jp/crouka/cabinet/topics/2023ss_sozai/23ss_or_detail_3.jpg");
//線
.MARU-LINE{
position: absolute;
top: -15%;
left: -55%;
transform: rotate(25deg);
width: 75%;
}
}
@media screen and (max-width:30rem) {
.MARU-POINT-03{
bottom:-10%;
right:2%;
//線
.MARU-LINE{
top: -25%;
left: 5%;
transform: rotate(55deg);
width: 38%;
}
}
}


// 画像（軍パン）
// 画像（軍パン）
// 画像（軍パン）
.IMG-CONTAINER-GUNPAN{
max-width: 1080px;
width:100%;
margin: 0 auto 20%;
background-color: $pink;
position: relative;
.PHOTO-YOKO{
display: flex;
img{width:calc(100% - 20px);
padding:0 10px;}
}
.PHOTO-TATE{
width:100%;
max-width: 660px;
margin: 0 auto;
img{padding:10% 0 2% 0;}
}
.text{max-width: 660px;
margin: 0 auto;
text-align: left;
@include SERIF;
font-size:0.9rem;
font-weight: 900;}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-GUNPAN{
.PHOTO-YOKO{margin:3% auto 0;
img{width: calc(50% - 5px);
padding:0;}
img:first-child{padding-right:10px;}
}
.PHOTO-TATE{
width:100%;
max-width: 660px;
margin: 0 auto;
img{
width:100%;
padding:5% 0 2% 0;}
}
.text{max-width: 95%;
margin: 0 auto;
text-align: left;
@include SERIF;
font-size:0.7rem;
font-weight: 900;}
}
}

.IMG-CONTAINER-GUNPAN{
.item-title{
@include Amiri;
font-size:1.4rem;
display: block;
padding: 0 0 40px 0;
}}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-GUNPAN{
.item-title{
    padding: 50px 0 0 0;
    font-size: 1.1rem;
}}
}


// 画像（PC横並び）
// 画像（PC横並び）
// 画像（PC横並び）
.IMG-CONTAINER{
width: calc(100% - 2px);
background-color:$pink;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.PHOTO{width:calc(50% - 2px);
margin:1px;
overflow: hidden;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER{
display: block;
flex-wrap: wrap;
overflow: hidden;
.PHOTO{width:calc(80% - 2px);
margin:15% auto;
img{width:100%;}
}
}
}



// 画像（PC中央縦長）
// 画像（PC中央縦長）
// 画像（PC中央縦長）
.IMG-CONTAINER-CENTER{
width: 100%;
background-color: $pink;
.PHOTO{width:33.333%;
position: relative;
margin:10% auto;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-CENTER{
background-color: $pink;
.PHOTO{width:calc(80% - 2px);
margin:0% auto;
img{width:100%;}
}
}
}



// 画像（PC中央横長）
// 画像（PC中央横長）
// 画像（PC中央横長）
.IMG-CONTAINER-CENTER-YOKO{
width: 100%;
background-color: $pink;
.PHOTO{width:50%;
margin:10% auto;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-CENTER-YOKO{
.PHOTO{width:calc(100% - 2px);
margin:15% auto;
img{width:100%;}
}
}
}




// 画像（PC全面）
// 画像（PC全面）
// 画像（PC全面）
.IMG-CONTAINER-ZENMEN{
width: 100%;
background-color: $pink;
.PHOTO{width:100%;
margin:10% auto;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-ZENMEN{
.PHOTO{width:100%;
img{width:100%;
object-fit: cover;
height: 260px;}
}
}
}


.link ul {
margin: 0;
padding: 0;
text-align: left;
list-style: none;
margin-bottom: 1px;
li a{font-size: 1rem;
@include Amiri;}
li a span{font-size: 1rem;
@include Amiri;}
li a span div.buy{
display: inline;
background-color:$dark-gray;
color:$white;
@include Amiri;
padding:0 4px;
font-size:0.8rem;}
}
@media screen and (max-width:30rem) {
.link ul {
padding: 0 10px;
li a{font-size: 0.8rem;
@include Amiri;}
li a span{
display: block;
font-size: 0.8rem;
@include Amiri;}
}
}



// アコーディオン
// アコーディオン
// アコーディオン
.menu {
text-align: right;
position: absolute;
bottom:0;
right:0;
width: 200px;
padding: 10px 10px 10px;
}
@media screen and (max-width:30rem) {
.menu {
width:calc(100% - 4px);
padding: 2px;
}
}
.left{
text-align: left;
bottom:0;
left:0;
width: 200px;
}
@media screen and (max-width:30rem) {
.left {
width:calc(100% - 4px);
padding: 2px;
}
}
.hamidashi{
text-align: left;
bottom:-2%;
right:-220px;
width: 200px;
}
@media screen and (max-width:30rem) {
.hamidashi{
width:calc(100% - 4px);
padding: 2px;
text-align: right;
bottom:-2%;
right:0;
}
}
.menu input {
display: none; /*チェックボックスを隠す*/
}
/*バー部分*/
.menu label {
cursor :pointer;
display: block;
text-decoration: none;
@include Amiri;
color: $white;
line-height: 1;
position: relative;
margin: 0 0 10px;
padding: 10px;
font-size: 0.7rem;
text-decoration: underline;
}
@media screen and (max-width:30rem) {
.menu label {
padding: 8px;
}
}
.menu label.black{color: $dark-gray;@include Amiri;}
/*開いたときに表示される部分*/
.menu ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 1px;
}
.menu li {
height: 0;
overflow-y: hidden;
transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
-webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
-moz-transition: padding-bottom 0.5s, padding-top 0.5s;
-ms-transition: padding-bottom 0.5s, padding-top 0.5s;
-o-transition: padding-bottom 0.5s, padding-top 0.5s;
color:$white;
padding-left:10px;
padding-right:10px;
font-size:0.7rem;
div.buy{
display: inline;
background-color: $white;
color:$dark-gray;
@include Amiri;
padding:0px 2px;
font-size:0.5rem;}
div.buy_black{
display: inline;
background-color:$dark-gray;
color:$white;
@include Amiri;
padding:0px 2px;
font-size:0.5rem;}
i{	font-style: normal;
	font-size:0.5rem;}
}
@media screen and (max-width:30rem) {
.menu li {
padding-left:5px;
padding-right:5px;
font-size:0.5rem;
div.buy{
@include Amiri;
padding:0px 2px;
font-size:0.5rem;}
div.buy_black{
padding:0px 2px;
font-size:0.5rem;}
}
}
.menu li.black{color: $dark-gray;}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li {
@include Amiri;
height: auto; /*開いたときに表示されるliの高さ*/
opacity: 1;
padding:5px 10px;
line-height: 1rem;
}
@media screen and (max-width:30rem) {
.menu li.black{color: $dark-gray;}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li {
height: 1.6rem; /*開いたときに表示されるliの高さ*/
padding:5px 10px;
line-height: 0.8rem;
}
}
/*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child,
#menu_bar07:checked ~ #links07 li:last-child,
#menu_bar08:checked ~ #links08 li:last-child,
#menu_bar09:checked ~ #links09 li:last-child,
#menu_bar10:checked ~ #links10 li:last-child {
@include Amiri;
padding:5px 10px;
margin-bottom: 10px;
line-height: 1rem;
}
@media screen and (max-width:30rem) {
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child,
#menu_bar07:checked ~ #links07 li:last-child,
#menu_bar08:checked ~ #links08 li:last-child,
#menu_bar09:checked ~ #links09 li:last-child,
#menu_bar10:checked ~ #links10 li:last-child {
padding:5px 10px;
margin-bottom: 5px;
line-height: 0.8rem;
}	
}
.animation-top,.animation-bottom,.animation-right,.animation-left{
opacity: 0;
overflow: hidden;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.animation-t,.animation-b,.animation-r,.animation-l{
opacity: 1;
display: block;
overflow: hidden;
position: relative;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
img{perspective: 1000;
}
}

.animation-t:before,.animation-b:before,.animation-r:before,.animation-l:before {
background: $pink;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

.animation-t:before {animation: animation-t 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-t {100% {transform: translateY(100%);perspective: 1000;}}
.animation-b:before {animation: animation-b 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-b {100% {transform: translateY(-100%);perspective: 1000;}}

.animation-r:before {animation: animation-r 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-r {100% {transform: translateX(100%);perspective: 1000;}}
.animation-l:before {animation: animation-l 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-l {100% {transform: translateX(-100%);perspective: 1000;}}





//アイテムリンク
.item-title{
@include Amiri;
font-size:1.4rem;
display: block;
padding: 0 0 60px 0;
}
@media screen and (max-width:30rem) {
.item-title{
padding: 100px 0 30px 0;
}
}
.item-link-container{
display: flex;
justify-content:flex-start;
max-width:1260px;
margin:0 auto;
}
.item-link{
max-width: 30%;
margin:0 1.5% 100px;
position: relative;
text-align: left;
img{width:100%;}
ul.styling_list{
padding:0;
text-align: left;
font-size: 0.7rem;
li{margin:10px 0;
a{@include Amiri;}
span.brand{
@include Amiri;
padding:0 6px 0 0;
}
color: #fff;
}
}
}
@media screen and (max-width:30rem) {
.item-link-container{
flex-wrap: wrap;
justify-content:flex-start;
max-width:100%;
margin:0 8%;
}
.item-link{
max-width: 42%;
margin:0 4%;
padding:20px 0;
ul.styling_list{
font-size: 0.7rem;
li{margin:0 0 5px 0;
line-height: 0.8rem;
}
}
}
}


//BUY
a.btn_04 {
max-width:400px;
margin:10px 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
position: relative;
background: $dark-gray;
border: 2px solid $dark-gray;
box-sizing: border-box;
padding: 0 25px 0 40px;
color: $pink;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition-duration: 0.3s;}
a.btn_04 span{@include Amiri;}
a.btn_04:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: 2px solid $pink;
border-right: 2px solid $pink;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 25px;
margin-top: -6px;
}
a.btn_04:hover {
background: $pink;
color: $dark-gray;
}
a.btn_04:hover:before {
border-top: 2px solid $dark-gray;
border-right: 2px solid $dark-gray;
}

@media screen and (max-width:30rem) {
a.btn_04 {
max-width:100%;
margin:5px 0;
height: 40px;
font-size: 12px;
}
a.btn_04:before {
content: '';
width: 6px;
height: 6px;
top: 50%;
left: 20px;
margin-top: -4px;
}
}


// フッター
// フッター
// フッター
footer {clear: both;
background:$dark-gray;
padding:40px;
font-size:0.6rem;
margin:100px 0 0 0;
ul {display:flex;
flex-wrap:wrap;
justify-content:center;}
li {margin:0 10px 0 0;
&:first-child {
margin:0 auto 0 0;}}
@media screen and (max-width:30rem) {
footer {margin:100px 0 0 0;}
li {margin:5px 10px;
&:first-child {
margin:auto;
width:100%;}}}
a {@include DM;
color:$soft-gray;
&:hover {color:$red;}
i {margin:0 0.25rem 0 0;}}}
#footer-logo {width:160px;
fill:$soft-gray;}
@media screen and (max-width:30rem) {
#footer-logo {
width:160px;
fill:$soft-gray;
margin:0 auto 24px auto;
display:block;}}