@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Raleway:wght@800&family=Source+Sans+Pro:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');
@import url("/css/error.css"); /* エラー画面表示設定 */
/* 全体の設定
************************************************************************/
body{
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.pillobo-top-body{
padding-top:80px;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1000px;
}
.pillobo-top-nav .navbar-light .navbar-nav .nav-link {
color: #000000;
}
.pillobo-top-br-sp::before {
content: "\A" ;
white-space: pre ;
}
.pillobo-top-gray{
background-color: #d9d9d9;
}
.pillobo-top-blue{
background-color: #1e3863;
}
.pillobo-top-yellow{
background-color: #ffc704;
}
.pillobo-top-light-gray{
background-color: #fffdfe;
}
.pillobo-gray{
background-color: #CFCFCF;
}
.pillobo-top-h1{
font-size: 14px;
margin: 0;
padding: 0;
}
.pillobo-top-h2{
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 28px;
letter-spacing: 0.5rem;
}
.pillobo-top-h3{
text-align: center;
font-size: 20px;
}
.pillobo-top-h4{
font-size: 16px;
}
.pillobo-top-h4-w{
font-size: 18px;
color: #FFFFFF;
text-align: center;
}
.pillobo-top-h5{
font-size: 14px;
}
.pillobo-radius-img {
border: #1e3863 solid 2px;
border-radius: 10px;
}

/* 星空部分の設定
************************************************************************/
.pillobo-top-main{
background-image: url("../img/topback-sp2.jpg");
background-position: top;
background-size: contain;
background-repeat: no-repeat;
}

/* 診断結果部分の設定
************************************************************************/
.pillobo-top-border-nv{
border: #1e3863 solid 2px;
background-color: #fff;
padding: 10px;
border-radius: 10px;
text-align: center;
}
.pillobo-top-shindan-kekka-h2{
text-align: center;
font-size: 20px;
line-height: 1;
margin-top: 20px;
}
.pillobo-top-shindan-kekka-title{
margin: 10px 0;
}
.pillobo-top-shindan-kekka{
font-family: 'Nunito', sans-serif;
font-size: 10vw;
color: #000;
font-weight: bold;
}
@media screen and (min-width:768px) {
.pillobo-top-shindan-kekka-h2{
font-size: 30px;
letter-spacing: 0.2rem;
margin-bottom: 1rem;
margin: 30px 0;
} 
.pillobo-top-shindan-kekka-title{
margin: 30px 0 5px;
}
.pillobo-top-shindan-kekka{
font-size: 6vw;
}
}
@media screen and (min-width:992px) {
.navbar-nav {
position: relative;
}
.navbar-nav li {
margin: 0 10px;
}
.navbar-nav li+ li::before {
position: absolute;
display: block;
content: "";
top: 40%;
height: 20px;
margin-top: -7px;
margin-left: -10px;
border-right: 1px solid #585858;
}
}

/* ランキング部分の設定
************************************************************************/
.pillobo-top-Ranking-White{
background-color: #fff;
padding: 10px;
border-radius: 10px;
}
.swiper-container {
background-color: #ffc704;
padding: 30px 0 80px!important;
}
.pillobo-top-crown{
width: 20%;
}
.pillobo-top-crown-text{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;  
overflow: hidden;
font-size: 0.9rem;
}
.pillobo-top-name{
text-align: center;
margin: 5px 0;
}
.pillobo-top-price{
text-align: right;
margin: 20px 0;
}
.pillobo-top-price-bt{
margin: 20px 0 10px;
}
.personalize-img span{
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #000;
}
@media screen and (min-width:768px) {
.pillobo-top-crown-text{
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;  
overflow: hidden;
font-size: 1rem;
}
}

/* フッターの設定
************************************************************************/
.pillobo-top-footer{
color: #FFFFFF;
line-height: 0.7;
}
.pillobo-top-footer-h2{
display: block;
font-size: 16px;
line-height: 2;
border-bottom: #ffffff 1px dashed;
margin-bottom: 20px;
}
.pillobo-top-footer p{
font-size: 14px;
line-height: 1.2;
margin-left: 15px;
}
.pillobo-top-footer a{
text-decoration: none;
color: #FFFFFF;
}
.pillobo-top-footer a:hover{
text-decoration: none;
color: #FFFFFF;
}
.pillobo-top-footer a:visited{
text-decoration: none;
color: #FFFFFF;
}
.pillobo-top-footer a:active{
text-decoration: none;
color: #FFFFFF;
}


/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(50px);
  transition: all 1s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}
.up_hover_item:hover {
  box-shadow: 1px 6px 12px #ccc;
  transform: translateY(-10px);
  transition: all 1s;
}



/* PC向けのCSS指定 */
@media screen and (min-width:992px) {
.pillobo-top-body{
padding-top:80px;
}
.pillobo-top-main{
background-image: url("../img/topback.jpg");
background-position: top;
background-size: contain;
background-repeat: no-repeat;
}
.pillobo-top-h2{
font-size: 46px;
}
.pillobo-top-h3{
font-size: 28px;
}
.pillobo-top-h4{
font-size: 22px;
line-height: 2;
}
.pillobo-top-h4-w{
font-size: 26px;
letter-spacing: 1rem;
color: #FFFFFF;
text-align: center;
}
.pillobo-top-h5{
font-size: 18px;
line-height: 2;
}
.pillobo-top-br-sp::before {
content: "" ;
}
.pillobo-top-footer{
line-height: 1;
}
.pillobo-top-footer-h2{
display: block;
font-size: 18px;
line-height: 1;
padding: 10px 0;
margin: 20px 0;
}
.pillobo-top-footer p{
font-size: 14px;
}
.pc-3{
font-size: 20px;
line-height: 3;
}
}



/* PPP　オーダーメイド枕の設定
************************************************************************/
.pillobo-top-ppp{
background-color: #d8a891;
}
.pillobo-top-ppp-White{
background-color: #fff;
padding: 20px;
margin: 10px 0;
border-radius: 10px;
}
.ppp-makura-box {
position: relative;
z-index: 1;
background-image: url("../img/ppp-makura-sp.jpg");
background-size: contain;
background-repeat:no-repeat;
margin-bottom: 100%;
}
.ppp-makura-box p{
border: #000000 1px solid;
padding: 2px;
background-color: #FFFFFF;
opacity: 0.8;
border-radius: 5px;
margin: 2px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ppp-makura-box .fuzoku {
font-size: 11px;
}
.ppp-makura-box .sozai{
text-align: center;
font-size: 10px;
}
.ppp-makura-box .sozai span{
font-size: 12px;
}
.ppp-makura-box .guramu{
text-align: end;
font-size: 12px;
}
.ppp-makura-box .guramu span{
font-size: 12px;
}
.ppp-makura-area-0 {
position: absolute;
width: 100%;
height: 100px;
top: 87%;
}
.ppp-makura-area-1 {
position: absolute;
width: 45%;
height: 100px;
top: 110%;
left: 2%;
}
.ppp-makura-area-2 {
position: absolute;
width: 45%;
height: 100px;
top: 140%;
left: 2%;
}
.ppp-makura-area-3 {
position: absolute;
width: 45%;
height: 100px;
top: 170%;
left: 2%;
}
.ppp-makura-area-4 {
position: absolute;
width: 45%;
height: 100px;
top: 200%;
left: 2%;
}
.ppp-makura-area-5 {
position: absolute;
width: 45%;
height: 100px;
top: 110%;
left: 54%;
}
.ppp-makura-area-6 {
position: absolute;
width: 45%;
height: 100px;
top: 140%;
left: 54%;
}
.ppp-makura-area-7 {
position: absolute;
width: 45%;
height: 100px;
top: 170%;
left: 54%;
}
.ppp-makura-area-8 {
position: absolute;
width: 45%;
height: 100px;
top: 160%;
left: 54%;
}
.ppp-makura-area-9 {
position: absolute;
width: 45%;
height: 100px;
top: 190%;
left: 54%;
}
.ppp-makura-area-10 {
position: absolute;
width: 45%;
height: 100px;
top: 220%;
left: 54%;
}
.personalize-pillow-text-1{
text-align: center;
font-size: 26px;
}

.personalize-pillow-footer{
z-index: 100;
}

.personalize-pillow-text-2{
text-align: center;
font-size: 16px;
}
.personalize-pillow-text-3{
font-size: 18px;
}
.personalize-pillow-text-4{
text-align: center;
font-size: 20px;
}
.personalize-pillow-text-4 img{
width:150px;
cursor: pointer;
}
.sizing-code-title{
color: #ff9900;
margin-right: 10px;
}
.sizing-code-code{
margin-right: 10px;
}
.personalize-pillow-text-5{
text-align: center;
font-size: 12px;
}
.personalize-pillow-text-6{
text-align: center;
font-size: 20px;
margin-bottom: 40px;
}
#sizing_code{
border: #FFFFFF;
}

/* PPP　オーダーメイド枕 PC向けのCSS指定 */
@media screen and (min-width:576px) {
.ppp-makura-box {
background-image: url("../img/ppp-makura.jpg");
margin-bottom: -5%;
}
.ppp-makura-box p{
border: #000000 1px solid;
padding: 5px;
background-color: #FFFFFF;
opacity: 0.8;
border-radius: 5px;
margin: 5px 0;
}
.ppp-makura-box .fuzoku{
font-size: 1.2vw;
}
.ppp-makura-box .sozai{
font-size: 1.4vw;
}
.ppp-makura-box .sozai span{
font-size: 1.4vw;
}
.ppp-makura-box .guramu{
font-size: 1.4vw;
}
.ppp-makura-box .guramu span{
font-size: 1.4vw;
}
.ppp-makura-area-0 {
position: absolute;
width: 100%;
top: 90%;
}
.ppp-makura-area-1 {
position: absolute;
width: 25%;
top: 65%;
left: 38%;
}
.ppp-makura-area-2 {
position: absolute;
width: 25%;
top: 33%;
left: 70%;
}
.ppp-makura-area-3 {
position: absolute;
width: 25%;
top: 3%;
left: 38%;
}
.ppp-makura-area-4 {
position: absolute;
width: 25%;
top: 65%;
left: 5%;
}
.ppp-makura-area-5 {
position: absolute;
width: 25%;
top: 65%;
left: 70%;
}
.ppp-makura-area-6 {
position: absolute;
width: 25%;
top: 3%;
left: 5%;
}
.ppp-makura-area-7 {
position: absolute;
width: 25%;
top: 3%;
left: 70%;
}
.ppp-makura-area-8 {
position: absolute;
width: 25%;
top: 95%;
left: 5%;
}
.ppp-makura-area-9 {
position: absolute;
width: 25%;
top: 95%;
left: 38%;
}
.ppp-makura-area-10 {
position: absolute;
width: 25%;
top: 95%;
left: 70%;
}
.personalize-pillow-text-1{
text-align: center;
font-size: 44px;
}
.personalize-pillow-text-2{
text-align: center;
font-size: 30px;
}
.personalize-pillow-text-3{
font-size: 22px;
padding: 20px 20px 30px;
}
.personalize-pillow-text-4{
text-align: center;
font-size:30px;
margin-top: 40px;
}
.personalize-pillow-text-5{
text-align: center;
font-size: 20px;
}
.personalize-pillow-text-6{
text-align: center;
font-size: 30px;
}
.personalize-pillow-footer{
margin-top: 30px;
}
}
@media screen and (min-width:1200px) {
.ppp-makura-box .fuzoku{
font-size: 18px;
}
.ppp-makura-box .sozai{
font-size: 20px;
}
.ppp-makura-box .sozai span{
font-size: 20px;
}
.ppp-makura-box .guramu{
font-size: 20px;
}
.ppp-makura-box .guramu span{
font-size: 20px;
}
}

/* 共通ヘッダー・フッターの設定
************************************************************************/

/* ヘッダー */
.pillobo-Common_header_container{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.pillobo-Common_header{
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
background-color: #ffc704;
width: 100%;
height: 80px;
}
.pillobo-Common_header-logo{
position: absolute;
top: 20px;
left: 20px;
width: 180px;
z-index: 5;
}

#hamburger .btn-gNav{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

#hamburger .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 4px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
#hamburger .btn-gNav span:nth-child(1) {
  top:0;
}
#hamburger .btn-gNav span:nth-child(2) {
  top:10px;
}
#hamburger .btn-gNav span:nth-child(3) {
  top:20px;
}
#hamburger .btn-gNav.open span:nth-child(1){
background: #fff;
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}
#hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
top: 6px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}
#gNav{
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;

font-size: 16px;
box-sizing: border-box;
z-index: 2;
padding-top: 50px;
transition: .3s;
}
#gNav.open{
right: 0px;
}
#gNav .gNav-menu{
width: 100%;
height:auto;
display: flex;
flex-direction: column;
text-align: center;
padding: 0;
}
#gNav .gNav-menu li{
display:block;
padding : 15px 30px;/* 2021-09-09 修正 */
}
#gNav .gNav-menu li a{
color: #000;
text-decoration: none;
}
#gNav .gNav-menu li:hover{
opacity: 0.6;
}
/* スマホ設定 */
@media (max-width: 768px) {
#gNav .gNav-menu li{
background-color: #ffc704;
}
#gNav .gNav-menu{
padding: 30px 0;
}
#gNav .gNav-menu li:hover{
background-color: #ffdb5f;
opacity: 1;
border: #C9C9C9 1px solid;
}
}
/* PC設定 */
@media (min-width: 769px){
.btn-gNav{
display: none;
}
#gNav{
position: fixed;
top: 0;
right: 0;
height: 50px;
}
#gNav .gNav-menu{
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 100%;
height: auto;
position: fixed;
top: 30px;
right: 0;
padding-right: 50px;
}
#gNav .gNav-menu li{
padding: 0 20px;
}
#gNav .gNav-menu  li+ li::before {
position: absolute;
display: block;
content: "";
top: 5px;
height: 15px;
margin-left: -20px;
border-right: 1px solid #585858;
}
}

/* フッター */
.pillobo-Common_footer-container-fluid{
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
max-width: 100%;
padding-top: 50px!important; 
background-color: #1e3863;
}
.pillobo-Common_footer-container{
max-width: 1140px;
padding: 30px 10px!important;
margin: 0 auto!important;
}
.pillobo-Common_footer-row{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1.5rem 0;
}
.pillobo-Common_footer-logo{
width: 100%;
margin-bottom: 20px;
}
.pillobo-Common_footer-flex-item {
width: 30%;
}
.pillobo-Common_footer-copyright {
text-align: center;
margin: 2rem 0;
color: #FFFFFF;
}
.pillobo-Common_footer-h2{
display: block;
font-size: 16px!important;
line-height: 2;
color: #FFFFFF;
border-bottom: #ffffff 1px dashed;
margin-bottom: 20px;
}
.pillobo-Common_footer p{
font-size: 14px!important;
line-height: 3!important;
margin: 0 0 0 15px!important;
color: #FFFFFF;
}
.pillobo-Common_footer a{
font-size: 14px!important;
text-decoration: none;
color: #FFFFFF;
}
.pillobo-Common_footer a:hover{
text-decoration: none;
color: #FFFFFF;
}
.pillobo-Common_footer a:visited{
text-decoration: none;
color: #FFFFFF;
}
.pillobo-Common-footer a:active{
text-decoration: none;
color: #FFFFFF;
}
@media (max-width: 768px) {
.pillobo-Common_footer-row{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 1.5rem 0;
}
.pillobo-Common_footer-flex-item {
width: 90%;
}
}

/* 2021-07-27 追加 2021-08-31 修正
************************************************************************/
.pillobo-h1-icon-b{
text-align: center;
background: #cc0d1a;
color: #FFFFFF;
font-size: 12px;
letter-spacing: 0.1rem;
border-radius:5px;
}
.pillobo-font{
font-family: 'Nunito', sans-serif;
}
.pillobo-h1-icon-b span{
font-size: 20px;
}
.pillobo-top-shindan-kekka-title-b{
position: relative;
margin: 10px 0;
text-align: center;
height: 30px;
font-size: 18px;
}
.text-bottom{
position:absolute;
width: 100%;
bottom: 0;
font-size: 14px;/* 2021-08-31 修正 */
}

@media screen and (min-width:768px) {
.pillobo-h1-icon-b{
text-align: center;
background: #cc0d1a;
color: #FFFFFF;
font-size: 18px;
padding: 3px;
}
.pillobo-h1-icon-b span{
font-size: 22px;
}
.pillobo-top-shindan-kekka-title-b{
margin: 30px 0 0;
text-align: center;
height: 20px;
font-size: 18px;
}
.text-bottom{
margin-bottom: 0.5rem; /* 2021-08-31 修正 */
font-size: 16px;/* 2021-08-31 修正 */
}
}

/* 2021-09-09 追加
************************************************************************/
.pittari-pc{
height: 150px;
}
.pittari-sp{
height: 110px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 40px!important;
}
/* 前ページ、次ページボタン共通のスタイル */
.swiper-button-prev,
.swiper-button-next {
background-image: none!important; /* デフォルトのボタン画像を消す */
}
.pittari-gray{
color: #999;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 0px!important;
}.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: 0px!important;
}
.swiper-button-next, .swiper-button-prev {
top: 40%!important;
}

.pittari-icon{
text-align: center;
border: #000000 solid 1px;
border-radius: 3px;
font-size: 12px;
padding: 2px;
margin-bottom: 10px;
}
.pittari-img{
padding: 20px;
}
@media screen and (min-width:768px) {
.pittari-img{
padding: 5px;
}
}

/* 2021-09-13 追加
************************************************************************/
.makura-icon{
/* height: 70px; 2021-09-15 下記で設定  */
}
.swiper-button-prev,
.swiper-button-next {
outline: none!important;
}
.swiper-button-prev,
.swiper-button-next　a:focus {
outline: none!important;
}
.swiper-button-prev,
.swiper-button-next:focus {
outline: none!important;
}

/* 2021-09-15 追加
************************************************************************/
.pittari-pc{
margin-top: 20px;
}
.pittari-sp{
margin-top: 20px;
}
.pittari-pc-aishodo{
width: 95%;
margin: 0 auto;
height: 80px;
}
.pittari-pc-item {
width: 95%;
margin: 0 auto;
height: 80px;
}
.pittari-sp-aishodo{
width: 95%;
margin: 0 auto;
height: 60px;
}
.pittari-sp-item{
width: 95%;
margin: 0 auto;
height: 40px;
}
.makura-icon{
width: 95%;
margin: 0 auto;
height: 70px;
}
.pillobo-top-price{
width: 95%;
margin: 0 auto;
}
@media (max-width: 768px) {
.pillobo-top-crown-text{
font-size: 1rem;
}
.pillobo-top-price-bt {
width: 95%;
margin: 0 auto 20px;
}
}

/* 2021-09-16 追加
************************************************************************/
.pillobo-font{
font-family: 'Nunito', sans-serif;
}
.pillobo-h1-icon{
text-align: center;
background: #cc0d1a;
color: #FFFFFF;
font-size: 14px;
letter-spacing: 0.1rem;
border-radius:5px;
line-height:3; /*2021-09-05追加*/
padding: 4px 0 0 0; /*2021-09-05追加*/
}
.pillobo-h1-icon span{
font-size: 42px;
margin-left: 15px;  /*2021-09-05修正*/
vertical-align:top;  /*2021-09-05追加*/
line-height:1; /*2021-09-05追加*/
}
.pillobo-h1c{
font-size: 14px;
vertical-align:middle;
word-break: break-all;
line-height: 1.2;
}
.pillobo-h1{
font-size: 18px;
vertical-align:middle;
word-break: break-all;
line-height: 1.5;
margin-bottom: 0.5rem; /*2021-08-31追加*/
}

/* PC向けの設定 */
@media screen and (min-width:768px) {
.pillobo-h1-icon{
text-align: center;
background: #cc0d1a;
color: #FFFFFF;
font-size: 20px;
padding: 15px 5px 5px 5px; /* 2021-09-05 修正 */
}
.pillobo-h1-icon span{
font-size: 50px;
}
.pillobo-h1c{
font-size: 18px;
line-height: 1;
}
.pillobo-h1{
font-size: 26px;
font-weight: bold;
line-height: 1.4;
}
}

/* 小スマホの設定 */
@media screen and (max-width: 365px) { /*2021-09-05追加*/
.pillobo-h1-icon span{ /*2021-09-05追加*/
margin-left: 0px; /*2021-09-05追加*/
} /*2021-09-05追加*/
} /*2021-09-05追加*/

/* 以下PPP上部のマージン設定 */
.pillobo-h1-icon{
margin-top: 10px;
}
.pillobo-h1c{
margin-top: 0px;
margin-bottom: 5px;
}
.pillobo-h1{
margin-top: 0px;
}
@media screen and (min-width:768px) {
.pillobo-h1-icon{
margin-top: 10px;
}
.pillobo-h1c{
margin-top: 10px;
}
}
/* 小スマホの設定 */
@media screen and (max-width: 365px) { 
.pittari-sp-aishodo{
height: 100px;
}
} 

/* 2021-11-04 追加
************************************************************************/
.guidance_banner-description {
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;  
overflow: hidden;
font-size: 16px;
color: #333;
}
.pillow-recommended-content .card-body a{
text-decoration: none;
}
@media (max-width: 768px) {
.pillow-recommended-content .row{
--bs-gutter-x: 0.5rem;
}
.guidance_banner-description {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;  
overflow: hidden;
font-size: 14px;
color: #333;
}
}