@charset "UTF-8";


/*  html全体 */
html {
font-size: 62.5%;
scroll-behavior: smooth;
/*scroll-padding-top: 50px;*/
}
@media screen and (min-width: 992px) {
html {
/*scroll-padding-top: 200px;*/
}	
}

/*  余白リセット */
#origami-box *{ margin:0; padding:0; box-sizing: border-box;}

/*  ページ全体 */
#origami-box {
margin:0 auto 4rem;
font-family:"Noto Sans JP", sans-serif, YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Verdana, Meiryo, sans-serif;
font-size: 1.6rem;
line-height: 2;
letter-spacing: 0.1rem;
text-align: center; /* 基本センター揃え */
}

/*  改行設定 */
#origami-box .br-pc{display: block;}
#origami-box .br-sp{display: none;}
@media (max-width: 780px) {
#origami-box .br-pc{display: none;}
#origami-box .br-sp{display: block;}	
}

/*  テキスト配置 */
@media (max-width: 780px) {
#origami-box .tac-sp{text-align: center;}
#origami-box .tal-sp{text-align: left;}
#origami-box .tar-sp{text-align: right;}
}

/*  ふわっとアニメーション */
#origami-box .fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#origami-box .fadeUpTrigger{
opacity: 0;
}


/* リスト設定 */
#origami-box li{list-style: none;}


/* リンク設定 */
#origami-box a{
color:#111111;
font-weight: 700;
display: block;
text-decoration: none;
position: relative;
top: 0;
}
#origami-box a:visited{
color: inherit;
}
#origami-box a:hover {
top: 5px;
transition: 0.3s;
}

/* フォント設定 */
#origami-box p,
#origami-box span{
color:#111111;
font-weight: 700;
line-height: 1.8;
}

#origami-box .attention{font-size: 1.1rem;}
#origami-box .txt_xsmall{font-size: 1.2rem;}
#origami-box .txt_small{font-size: 1.4rem;}
#origami-box .txt_medium{font-size: 1.6rem;}
#origami-box .txt_large{font-size: 1.8rem;}
#origami-box .txt_xlarge{font-size: 2rem;}

#origami-box h1{font-size: 3.5rem;}
#origami-box h2{font-size: 3.0rem;}
#origami-box h3{font-size: 2.5rem;}
#origami-box h4{font-size: 2.0rem;}
#origami-box h5{font-size: 1.8rem;}
#origami-box h1,
#origami-box h2,
#origami-box h3,
#origami-box h4,
#origami-box h5{
color:#111111;
font-weight: 700;
line-height: 1.5;
letter-spacing: normal;
}

/* 画像設定 */
#origami-box img{
width: 100%;
object-fit: cover;
display: block;
margin: auto;
}


/* 余白設定 */
#origami-box section{
padding-top: 6rem;
padding-bottom: 6rem;
}
#origami-box #top{
padding-bottom: 0rem;
}
#origami-box #outline{
padding-top: 3rem;
}
#origami-box #feature{
padding-top: 3rem;
padding-bottom: 8rem;
}
#origami-box #sns{
padding-top: 10rem;
padding-bottom: 10rem;
}
#origami-box #variation{
padding-top: 10rem;
}
#origami-box #items{
padding-top: 13rem;
padding-bottom: 13rem;
}
@media screen and (max-width:780px) {
#origami-box #outline{
padding-bottom: 3rem;
}
#origami-box #sns{
padding-top: 6rem;
}
#origami-box #items{
padding-top: 8rem;
padding-bottom: 8rem;
}
}

#origami-box .side_padding{
padding-left: 3rem;
padding-right: 3rem;
}


/* くの字の矢印：親要素に「position: relative;」 */

/* 上下左右中央 
#origami-box .arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}*/
/* 左右中央 
#paorigami-boxge .arrow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}*/
/* 上下中央 
#origami-box .arrow {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}*/

#origami-box .arrow::before {
content: "";
display: block;
width: 1rem;
height: 1rem;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
/* 左向き */
#origami-box .arrow.-left::before{
transform: rotate(-135deg);
}
/* 右向き */
#origami-box .arrow.-right::before{
origami-box: rotate(45deg);
}
/* 上向き */
#origami-box .arrow.-top::before{
transform: rotate(-45deg);
}
/* 下向き */
#origami-box .arrow.-bottom::before{
transform: rotate(135deg);
}



/* 背景色 */
#origami-box .bg-pk{background-color: #e4d2c5;}
#origami-box .bg-gy{background-color: #f1f1f1;}
#origami-box .bg-gr{background-color: #d2ddc3;}
#origami-box .bg-wh{background-color: #ffffff;}
#origami-box .bg-rd{background-color: #d84848;}
#origami-box .bg-bl{background-color: #4980d6;}
#origami-box .bg-ye{background-color: #e5b94c;}


#origami-box .content_wrapper{
margin: auto;
}


/* 背景飾り画像 */
#origami-box .bg-img{
position: relative;
}
#origami-box .bg-img::before,
#origami-box .bg-img::after{
content: '';
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
z-index: -1;
background-image: url("../img/bg-img01.png");
width: 400px;
height: 400px;
}
#origami-box .bg-img::before{
right: -22rem;
}
#origami-box .bg-img::after{
left: -22rem;
}
#origami-box #outline .bg-img::before{
top: -6rem;
}
#origami-box #outline .bg-img::after{
bottom: -38rem;
}
#origami-box #feature .bg-img::before{
top: 25rem;
}
#origami-box #feature .bg-img::after{
bottom: 20rem;
}

#origami-box #sns .bg-img::before,
#origami-box #sns .bg-img::after{
background-image: url("../img/bg-img01-pk.png");
}
#origami-box #sns .bg-img::before{
top: -5rem;
right: -30rem;
}
#origami-box #sns .bg-img::after{
bottom: -20rem;
left: -30rem;
}

/* リンクボタン */
#origami-box .link_btn{
max-width: 800px;
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 3rem;
}
#origami-box .link_btn a{
margin: auto;
width:45%;
padding: 1rem 2rem;
border-radius: 5px;
color: #ffffff;
}
@media screen and (max-width:780px) {
	#origami-box .link_btn a{
	width:100%;
	}
}

/* マーカー */
#origami-box .marker-pk {
background: linear-gradient(transparent 50%, #e1bda3 50%);
}
#origami-box .marker-wh {
background: linear-gradient(transparent 50%, rgba(255,255,255,0.8) 50%);
}



/* top */
#origami-box #top .decoration_img{
max-width: 550px;
margin: auto;
margin-bottom: 6rem;
}
#origami-box #top h1{
font-size: 6rem;
font-family: "Zen Kaku Gothic New", sans-serif;
line-height: 1;
}
#origami-box #top h1 span{
display: block;
font-size: 2.2rem;
padding-top: 1rem;
}
@media screen and (max-width:780px) {
	#origami-box #top h1{
	font-size: 5.5rem;
	}
}

/* -- 無限ループ -- */
#origami-box #top .loop {
padding: 3rem 0;
}
#origami-box #top .loop_wrap {
display: flex;
overflow: hidden;
}
#origami-box #top .loop_list {
display: flex;
list-style: none;
padding-right: 6rem;
gap: 2rem;
}
#origami-box #top .loop_list_left {
animation: loop-left 40s infinite linear 0.5s both;
}
#origami-box #top .loop_item {
width: calc(100vw / 3);
}
#origami-box #top .loop_item > img {
width: 100%;
}
@keyframes loop-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@media screen and (max-width:780px) {
	#origami-box #top .loop_item {
	width: calc(100vw / 1.5);
	}
}
/* -- 無限ループ -- */


/* outline */
#origami-box #outline{
overflow: hidden;
}
#origami-box #outline .content_wrapper{
max-width: 1000px;
}
#origami-box #outline h2{
padding-bottom: 3rem;
}
#origami-box #outline p.txt_medium span{
padding-right: 0.3rem;
padding-left: 0.3rem;
}
#origami-box #outline .decoration_img img{
max-width: 400px;
margin-bottom: -1rem;
}
#origami-box #outline ul{
margin: 5rem auto;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}
#origami-box #outline ul li{
width: calc(100vw / 3);
aspect-ratio: 1.2 / 2;
}
#origami-box #outline ul li:nth-child(2){
margin-bottom: -10rem;
}
#origami-box #outline ul li:nth-child(3){
margin-bottom: -20rem;
}
#origami-box #outline .link_btn{
margin-top: 18rem;
}
#origami-box #outline ul li img{
height: 100%;
}
@media screen and (max-width:780px) {
	#origami-box #outline ul{
	gap: 0rem;
	}
	#origami-box #outline ul li{
	aspect-ratio: 1 / 2;
	}
}



/* feature */
#origami-box #feature{
overflow: hidden;
}
#origami-box #feature .content_wrapper{
max-width: 1000px;
}
#origami-box #feature ul li{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#origami-box #feature ul li:nth-child(even){
flex-direction: row-reverse;
}
#origami-box #feature ul li .img_box,
#origami-box #feature ul li .txt_box{
width: 50%;
}
#origami-box #feature ul li .img_box img{
width: 100%;
}
#origami-box #feature ul li .txt_box{
width: 260px;
margin: auto;
text-align: left;
}
#origami-box #feature ul li .txt_box h3{
margin-bottom: 2.5rem;
position: relative;
}
#origami-box #feature ul li .txt_box h3::before{
font-family: "Ms Madi", cursive;
font-size: 6rem;
transform: rotate(-14deg);
color: rgba(234, 141, 78, .4);
position: absolute;
top: -5rem;
left: -7rem;
z-index: -1;
}
#origami-box #feature ul li:nth-child(1) .txt_box h3::before{
content: "Various ways";
}
#origami-box #feature ul li:nth-child(2) .txt_box h3::before{
content: "Easy to use";
}
#origami-box #feature ul li:nth-child(3) .txt_box h3::before{
content: "Anywhere";
}
#origami-box #feature .decoration_img img{
max-width:900px;
margin-top: -3rem;
margin-left: -3rem;
}
@media screen and (max-width:780px) {
#origami-box #feature ul li,
#origami-box #feature ul li:nth-child(even){
flex-direction: column-reverse;
}
#origami-box #feature ul li .img_box,
#origami-box #feature ul li .txt_box{
width: 100%;
}
#origami-box #feature ul li .txt_box{
padding: 4rem 3rem 6rem;
}
#origami-box #feature .decoration_img img{
margin-top: 0rem;
}
}



/* sns */
#origami-box #sns .decoration_img{
max-width: 600px;
margin: auto;
padding-bottom: 5rem;
}
#origami-box #sns .link_btn{
margin-top: 8rem;
}

/* snsスライダ */
#origami-box #sns .origami_box_sns{
max-width: 700px;
margin: 4rem auto;
}
#origami-box #sns .origami_box_sns .swiper-slide {
transition: transform 0.6s;
}
#origami-box #sns .origami_box_sns .swiper-slide-next,
#origami-box #sns .origami_box_sns .swiper-slide-prev{
opacity: 0.4;
transform: scale(0.85);
}
/*ページネーション設定*/
#origami-box #sns .origami_box_sns .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
#origami-box #sns .origami_box_sns .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 0.3rem;
}
#origami-box #sns .origami_box_sns .swiper-pagination-bullet {
background-color: #fff;
}
/*矢印設定*/
#origami-box #sns .origami_box_sns .swiper-button-next,
#origami-box #sns .origami_box_sns .swiper-button-prev {
--swiper-navigation-color: #fff;
top:var(--swiper-navigation-top-offset,45%);
}
#origami-box #sns .origami_box_sns .swiper-pagination-bullet {
background-color: #6E6E6E;
}

@media screen and (max-width:780px) {
#origami-box #sns .decoration_img{
padding-bottom: 3rem;
}
#origami-box #sns h3{
font-size: 2rem;
}
/*矢印設定
#origami-box #sns .origami_box_sns .swiper-button-next,
#origami-box #sns .origami_box_sns .swiper-button-prev {
display: none;
}*/
}


/* variation */
#origami-box #variation .content_wrapper{
max-width: 800px;
}
#origami-box #variation h3{
margin-bottom: 3rem;
position: relative;
}
#origami-box #variation h3::before,
#origami-box #variation h3::after{
content: '';
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 110px;
height: 220px;
position: absolute;
z-index: 1;
bottom:-20rem;
}
#origami-box #variation h3::before{
background-image: url("../img/s-bubble.png");
left: -0rem;
}
#origami-box #variation h3::after{
background-image: url("../img/m-bubble.png");
right: -0rem;
}

#origami-box #variation ul{
display: flex;
justify-content: center;
align-items: center;
padding: 5rem 3rem;
}
#origami-box #variation ul li{
width: 30%;
}
#origami-box #variation ul li img{
max-width: 180px;
}
@media screen and (max-width:780px) {
#origami-box #variation h3::before,
#origami-box #variation h3::after{
display: none;
}
#origami-box #variation ul{
flex-wrap: wrap-reverse;
column-gap: 4rem;
padding: 3rem 3rem;
}
#origami-box #variation ul li{
width: 43%;
}
#origami-box #variation ul li:first-of-type {
order: 3;
}
}


/* item */
#origami-box #items .content_wrapper{
max-width: 1000px;
}
#origami-box #items ul li{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 4rem;
}
#origami-box #items ul li:not(:last-of-type){
margin-bottom: 6rem;
}
#origami-box #items ul li:nth-child(even){
flex-direction: row-reverse;
}
#origami-box #items ul li .img_box,
#origami-box #items ul li .txt_box{
width: 50%;
}
#origami-box #items ul li .txt_box{
max-width: 300px;
margin: auto;
}
#origami-box #items ul li .txt_box .quantity{
display: flex;
}
#origami-box #items ul li .txt_box .quantity p{
border: 1.5px solid #111111;
border-radius: 5rem;
padding: 0.2rem 0.8rem;
}
#origami-box #items ul li .txt_box .quantity p:not(:last-of-type){
margin-right: 1rem;
}

#origami-box #items ul li .txt_box h3,
#origami-box #items ul li .txt_box p{
text-align: left;
margin-bottom: 2rem;
}
#origami-box #items ul li .txt_box h3{
margin-bottom: 2rem;
position: relative;
}
#origami-box #items ul li .txt_box h3::after{
content: '';
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
top: -1rem;
right: 0;
transform: rotate(10deg);
}
#origami-box #items ul li#craft-s .txt_box h3::after{
background-image: url("../img/origami-box-2b.png");
width: 120px;
height: 120px;
}
#origami-box #items ul li#craft-m .txt_box h3::after{
background-image: url("../img/origami-box-1b.png");
}
#origami-box #items ul li#white-m .txt_box h3::after{
background-image: url("../img/origami-box-3b.png");
}
#origami-box #items .link_btn{
margin-top: 10rem;
}
@media screen and (max-width:780px) {
#origami-box #items ul li:not(:last-of-type){
margin-bottom: 2rem;
}
#origami-box #items ul li .img_box,
#origami-box #items ul li .txt_box{
width: 100%;
}
#origami-box #items ul li .txt_box{
max-width: 100%;
}
#origami-box #items ul li .txt_box{
padding: 4rem 3rem;
}
#origami-box #items .link_btn{
margin-top: 2rem;
}
}

/* スライダ */
/* swiper ページネーション */
#origami-box #items .swiper-pagination-bullet-active{
background: #ffffff;
}
#origami-box #items .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
#origami-box #items .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 0.3rem;
}


/* original-printing */
#origami-box #original-printing .decoration_img{
max-width: 500px;
margin: auto;
padding-bottom: 3rem;
}
#origami-box #original-printing .content_wrapper{
max-width: 800px;
border-radius: 5px;
padding: 5rem;
}
#origami-box #original-printing .content_wrapper ul{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#origami-box #original-printing ul li.img_box,
#origami-box #original-printing ul li.txt_box{
width: 50%;
}
#origami-box #original-printing ul li.txt_box{
width: 260px;
margin: auto;
text-align: left;
}
#origami-box #original-printing ul li.txt_box .link_btn{
margin-top: 4rem;
}
#origami-box #original-printing ul li.txt_box .link_btn a{
width: 100%;
color: #111111;
text-align: center;
}
@media screen and (max-width:780px) {
	#origami-box #original-printing .content_wrapper{
	padding: 4rem 2rem;
	}
	#origami-box #original-printing ul li.img_box,
	#origami-box #original-printing ul li.txt_box{
	width: 100%;
	}
	#origami-box #original-printing ul li.txt_box{
	padding: 3rem 3rem 0rem;
	}
}