@charset "UTF-8";
/* CSS Document */


/*==================================================
共通
==================================================*/
#interview{
    min-width: 1240px;
    overflow: hidden;
    max-width: 100%;
    margin: 0px auto 40px;
    padding:0;
	font-size: 18px;
    background: #fff;	
}
strong{font-weight: bold;}

.block-contentspages-header h2{
    color: #fff;
    padding: 0;
}
.block-contentspages-header h2 .ttl-main{
font-size: 26px;
    font-weight: normal;
}
.block-contentspages-header h2 .ttl-main_s{
font-size: 40px;
    font-weight: bold;
}

@media screen and (max-width: 641px) {
#interview{
    min-width: 100%;
    margin: 0px auto 40px;
}
    .block-contentspages-header h2 .ttl-main{
    font-size: 18px;
}
.block-contentspages-header h2 .ttl-main_s{
    font-size: 22px;
}
    
    /*SP_END*/
}


/*==================================================
商品一覧　共通
==================================================*/
.mt130{
    margin: 130px 0 0 0;
}
.mt100{
    margin: 100px 0 0 0;
}
.mt60{
    margin: 60px 0 0 0;
}

#interview .stylish-list{
        width: 1230px;
    margin:80px auto 0;    
}
#interview .stylish-list h3{
    font-size: 26px;
    text-align: center;
padding: 25px 0;
}

#interview .int-list-main-img{
    display: block;
    }

#interview .int-list-comment{
	display: flex;
    justify-content: space-between;
}
#interview .int-list-swap{
    flex-direction: row-reverse;
}


#interview .int-list-comment-txt h4{
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items:center
}
#interview .int-list-comment-txt h4 span:first-child{
    font-size: 44px;
    font-weight: bold;
    font-family: 'Arial', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
    margin: 0 20px 0 0;
}

#interview .int-list-comment-txt .int-list-underline{
    width: 160px;
    margin: 20px 0 30px;
}

#interview .int-list-comment-txt .int-list-comment-txt-child{
margin: 0 0 0 80px;
    line-height: 220%;
}

#interview .int-list-comment-txt .int-list-comment-txt-child strong{
    font-weight: bold;
    font-size: 20px;

}

#interview .int-list-comment-txt{
    width: 630px;
}

#interview .int-list-spec{
        bottom: 0px;    
}
#interview .int-list-spec-list{
    margin: 40px 0 0 0;
    width: 560px;
}


@media screen and (max-width: 641px) {
    .mt100{
    margin:  0;
}
    .mt60{
    margin: 30px 0 0 0;
}
    #interview .stylish-list h3{
    font-size: 18px;
    text-align: center;
padding: 18px 0;
}

#interview .stylish-list{
        width: 100%;
}
#interview .int-list-comment{
	display: block;
}
    #interview .int-list-comment-txt{
font-size: 16px;
line-height: 190%;
width: 100%;
padding: 25px 15px 30px 15px;
    margin: 0;
}    
#interview .int-list-comment-txt h4{
    font-size: 18px;
    font-weight: bold;
    display: block;
    align-items:center;
    line-height: 180%;
}
#interview .int-list-comment-txt h4 span:first-child{
    font-size: 30px;
    margin: 0;
}

#interview .int-list-comment-txt .int-list-comment-txt-child{
margin: 0;
    line-height: 200%;
}

#interview .int-list-comment-txt .int-list-comment-txt-child strong{
    font-weight: bold;
font-size: 16px;
    line-height: 150%;
}
    /*SP_END*/
}



/*==================================================
動画　共通
==================================================*/

.int-list-movie{
    margin: 90px auto 0;
    display: block;
    text-align: center;
    width: 850px;
}

.int-list-movie h4{
    font-weight: bold;
    font-size: 24px;
}
@media screen and (max-width: 641px) {

.int-list-movie{
    margin: 50px auto 0;
    width: 90%;
}

.int-list-movie h4{
    font-size: 20px;
}
      /*SP_END*/  
}


/*==================================================
ファミリーが選んだランドセル　共通
==================================================*/

.int-list-rand{
    margin: 80px 0 0 0;
    display: block;
}
.int-list-rand ul{
display: flex;
    justify-content: space-between;
    width: 650px;
    margin: 40px auto 110px;
}
.int-list-rand ul li{
    width: 290px;
}
.int-list-rand ul li img{
    border-radius: 5px;
}
.int-list-rand ul li .rand-ttl{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.int-list-rand ul li .rand-spec{
    margin: 20px 0;
    line-height: 200%;
}

@media screen and (max-width: 641px) {
.int-list-rand ul{
display: flex;
    justify-content: space-between;
    width: 94%;
    margin: 20px 3%;
}
.int-list-rand ul li{
    width: 47%;
    font-size: 16px;
}
.int-list-rand ul li .rand-ttl{
    font-size: 16px;
}
.int-list-rand ul li .rand-spec{
    margin: 20px 0;
    line-height: 160%;
}
      /*SP_END*/  
}


/***商品詳細を見る　ボタン***/
.btn_rand{
    border: 1px solid #000;
    border-radius: 10px;
    padding: 16px 0;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    position: relative;
}

.btn_rand::after {
content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    width: 25px;
    height: 25px;
    margin-top: -10px;
    background-image: url(../img/icon_aroww_bk.png);
    background-repeat: no-repeat;
}

@media screen and (max-width: 641px) {
.btn_rand::after {
    background-image: none;
}
      /*SP_END*/  
}



/*==================================================
冒頭文
==================================================*/

#interview_intro{
    text-align: center;
    margin: 50px 0;
}

@media screen and (max-width: 641px) {
#interview_intro{
    text-align: left;
    margin: 30px 2%;
}
      /*SP_END*/  
}


/*==================================================
interview１
==================================================*/

#interview #int-koiso .int-list-comment-txt .int-list-underline{
    border-bottom:#FFE56A 2px solid;
}

#interview #int-koiso .int-list-comment-txt h4 span{
    color:#FFE56A;
}

#int-koiso h3{
    background: #FFE56A;
    color: #fff;
}

@media screen and (max-width: 641px) {
#interview #int-koiso  .txt_border{
border-left: 60px solid #FFE56A;
    }
    
      /*SP_END*/  
}

/*==================================================
interview2
==================================================*/

#interview #int-kunui .int-list-comment-txt .int-list-underline{
    border-bottom:#71d8bc 2px solid;
}

#interview #int-kunui .int-list-comment-txt h4 span{
    color:#71d8bc;
}

#int-kunui h3{
    background: #71d8bc;
    color: #fff;
}

@media screen and (max-width: 641px) {
#interview #int-kunui  .txt_border{
border-left: 60px solid #71d8bc;
    }
    
      /*SP_END*/  
}

/*==================================================
interview3
==================================================*/

#interview #int-take .int-list-comment-txt .int-list-underline{
    border-bottom:#f9c9f4 2px solid;
}

#interview #int-take .int-list-comment-txt h4 span{
    color:#f9c9f4;
}

#int-take h3{
    background: #f9c9f4;
    color: #fff;
}

@media screen and (max-width: 641px) {
#interview #int-take  .txt_border{
border-left: 60px solid #f9c9f4;
    }
    
      /*SP_END*/  
}




/*============================================================
	見出し部分
	============================================================*/
#interview .block-contentspages-header{margin:0 -30px;
padding:0;}

#interview .block-contentspages-header::before {
background-image: url(../img/main_img_pc.png);
margin:0;
padding:0;
background-size:cover;
}

@media screen and (max-width: 641px) {
#interview .block-contentspages-header{margin:0 0;
padding:0;}

#interview .block-contentspages-header::before {
background-image: url(../img/main_img_sp.png);
margin:0;
padding:0;
background-size:cover;
}
		/*smp end*/}	


/*==================================================
お気に入りのランドセルを探してみよう
==================================================*/
#interview .seca_ttl{
text-align:center;
margin-top:120px;
margin-left:auto;
margin-right:auto;
position: relative;
padding: 0;
    margin-bottom: 40px;
}

#interview .seca_ttl h3{
  display: inline-block;
  position: relative;
  height: 72px;/*リボンの高さ*/
  line-height: 72px;/*リボンの高さ*/
  text-align: center;
  padding: 0 60px;/*横の大きさ*/
  font-size: 26px;/*文字の大きさ*/
  background: #FDD101;/*塗りつぶし色*/
  color: #000;/*文字色*/
  box-sizing: border-box;
  z-index: 0;
}

#interview .seca_ttl h3:before, #interview .seca_ttl h3:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

#interview .seca_ttl h3:before {
  top: 0;
  left: 0;
  border-width: 36px 0px 36px 15px;
  border-color: transparent transparent transparent #fdf8eb;/*背景色*/
  border-style: solid;
}

#interview .seca_ttl h3:after {
  top: 0;
  right: 0;
  border-width: 36px 15px 36px 0px;
  border-color: transparent #fdf8eb transparent transparent;/*背景色*/
  border-style: solid;
}

#interview .seca_ttl p{
position: absolute;
top: -38px;
left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

  #interview .seca_ttl p img {
    max-width: fit-content;
        height: auto;
        vertical-align: bottom;
    }
.txt_boy_girl{
    text-align: center;
}


@media screen and (max-width: 641px) {
#interview .seca_ttl{
margin-top: 0;
        margin-left: 9%;
        margin-right: auto;
        padding: 0;
}

#interview .seca_ttl h3{
display: inline-block;
        position: relative;
        height: 80px;
        width: 300px;
        line-height: 30px;
        text-align: center;
        padding: 10px 30px 30px 30px;
        font-size: 16px;
        background: #FDD101;
        color: #000;
        box-sizing: border-box;
        z-index: 0;
        margin-left: -30px;
}

#interview .seca_ttl h3:before, #interview .seca_ttl h3:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

#interview .seca_ttl h3:before {
        top: 0;
        left: 0;
        border-width: 40px 0px 40px 15px;
        border-color: transparent transparent transparent #fdf8eb;
        border-style: solid;
}

#interview .seca_ttl h3:after {
        top: 0;
        right: 0;
        border-width: 40px 15px 40px 0px;
        border-color: transparent #fdf8eb transparent transparent;
        border-style: solid;
}
    
    #interview .seca_ttl p{
position: absolute;
top: -30px;
    left: 45%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
    
  #interview .seca_ttl p img {
      width: 100px;
    max-width: fit-content;
        height: auto;
        vertical-align: bottom;
    }
.txt_boy_girl{
    text-align:left;
    margin: 0 2%;
}
    
/*smp end*/}




/*============================================================
    男の子・女の子人気のランドセル
	============================================================*/
     
#interview #wrap_popularity{
width: 100%;
    margin: 180px auto 0 auto;
    padding: 60px 0;
    background: #fcf8e8;
}

#interview .block-catalog-container_2 {
    display: table;
}

#interview .block-catalog-container_2 ul{
    display: flex;
    justify-content: space-between;
}
#interview .block-catalog-container_2 li {
    width: 580px;
    padding-top: 39px;
}
#interview .block-catalog-container_2 a {
    width: 580px;
    font-size: 1.8rem;
    display: flex;
    text-align: center;
}
#interview .pop_blue {
    background-color: #0F61AD;
    color: #ffffff!important;
}
.pop_btn-sdw {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    letter-spacing: .04em;
    paddig-top: 5px;
    padding-bottom: 5px;
    height: 90px;
    box-shadow: 0 4px 0 gray;
}
#interview .pop_blue::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjIiIGhlaWdodD0iNS42NzgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBmNjFhZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMiIgZD0iTS42IDIuODM5aDhNNS45LjgzOWwyLjcgMi0yLjcgMiIvPjwvc3ZnPg==);
}
.btn-arw::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 22px;
    background-color: #ffffff;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjIiIGhlaWdodD0iNS42NzgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMiIgZD0iTS42IDIuODM5aDhNNS45LjgzOWwyLjcgMi0yLjcgMiIvPjwvc3ZnPg==);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
}

#interview .pop_red {
    background-color: #DC0016;
    color: #ffffff!important;
}

#interview .pop_red::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjIiIGhlaWdodD0iNS42NzgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RjMDAxNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMiIgZD0iTS42IDIuODM5aDhNNS45LjgzOWwyLjcgMi0yLjcgMiIvPjwvc3ZnPg==);
}

#interview .block-catalog-container_2 .boys_girls_box img {
    border-radius: 10px 10px 0 0;
    width: 600px;
    height: 220px;
    object-fit: cover;
    object-position: 0% 0%;
}
    
@media screen and (max-width: 641px) {
     
#interview #wrap_popularity{
    margin: 70px auto 0 auto;
  padding: 120px 0 60px 0;

}
    
#interview .block-catalog-container_2 {
width: 100%;
    margin: 0 auto;
    padding: 0 0 10px 0;
    background: #fcf8e8;
}

#interview .block-catalog-container_2 ul{
display: flex;
}
#interview .block-catalog-container_2 li {
        width: 47%;
        margin-left: auto;
        margin-right: auto;
}
#interview .block-catalog-container_2 a {
    width: 100%;
}
  .pop_btn-sdw {
    height: 60px;
    padding-top: 8px;
}
    
#interview .block-catalog-container_2 .boys_girls_box img {
border-radius: 10px 10px 0 0;
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: 0% 0%;
}
#interview .block-catalog-container_2 li picture {
    width: 100%;
}
    #interview .pop_blue {
    padding: 0 20px 0 0;    
}
#interview .pop_red {
    padding: 0 20px 0 0;
}
		/*smp end*/}	

   

/*============================================================
    ショールームへ
	============================================================*/
      
.block-catalog-container_2+.block-catalog-container_2{
margin-top: 60px;
    display: inline-block;
}


.block-catalog-container_2 .block-schedule-point{
    margin: 30px 0 60px 0;
    display: block;
    text-align: center;
}

/* 黄色いボタン　24.3.25修正分 */

.block-top-thought-btn{
	height: 85px;
}
.block-top-thought-btn a{
	width: 400px;
	height: 80px;
}
.block-top-thought-btn.catalog{
	margin-top: 5px;
	margin-bottom: 60px;
}
.block-top-thought-btn.catalog a::before{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 60px;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	background-image: url("../schedule/img/icon_book.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.block-top-thought-btn.shops a::before{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 35px;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	background-image: url("../../schedule/img/icon_shops.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}


@media screen and (max-width: 641px) {
    
.block-catalog-container_2+.block-catalog-container_2{
padding: 110px 0 0 0!important;
}
.block-catalog-container_2 .block-schedule-point{
    margin: 30px 2% 30px 2%;
    display: block;
    text-align: center;
}

.block-top-thought-btn{
height: 85px;
    width: 96%;
    margin: 0 auto;
}
#interview .block-catalog-container_2 a {
    font-size: 16px;
}
		/*smp end*/}