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

/*ここから下は共通部分なので変更しない*/
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;500&display=swap');
html, body {
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
color:#000;
margin: 0;
padding: 0;
}
section {
padding: 1.5em 0;
}

.flex{
display: flex;
align-items: center;
}
/*スマホ*/
@media screen and (max-width:640px){
.flex{
flex-direction: column;
}
}
.left, .right {
    flex-basis: 50%;
}
.right img, .left img {
    width: 100%;
}

body{
font-family: 'Montserrat',"KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
color:#414042;
font-weight: 200;
}

a {
color: #60615f !important;
text-decoration: none;
}

.more_btn {
    display: block;
    max-width: 400px;
    min-width: 300px;
    height: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    font-size: 120%;
    text-align: center;
    margin: 0 auto;
    border: 1px solid black;
    color: #292929 !important;
}

.more_btn:hover,.more_btn:visited{
transform: scale(110%);
transition: transform ease .3s;
}

.more_btn.white{
color:white !important;
border:1px solid #FFFFFF !important;
}
.headline{
    font-size: 30px;
    text-align: center;
    letter-spacing: 5px !important;
    font-weight: 500;
    font-family: serif;
    margin: 3em auto 1.5em;
}


.llR {
    font-size: 30px;
    text-align: center;
    letter-spacing: 5px !important;
    position: relative;
    font-weight: 500;
    font-family: serif;
    margin: 3em auto 3em;
    z-index: 100;
}
.llR:after{
    content: "";
    display: block;
   background:#d0dfe1ad;
    max-width: 80vw;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    bottom: -13px;
    z-index: -1;
    right: -50%;
    left: -50%;
}
/*画像サイズ調整*/

section.item_list {
    background: #f4f4f4;
    padding: 1.5em 0px;
}

ul.item_list {
    padding-left: 0 !important;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
    font-size: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item_list a{
	text-decoration:none;
	color:#60615f;
}
.item_list li {
    list-style-type: none;
    text-align: center;
    margin: 0 5px 20px;
    padding-bottom: 1.5em;
    background: white;
    flex-basis: 30%;
}

.item_list img{
	display:block;
	width:100%;
	height:auto;
	padding-top:0;
	margin-top: 0;
}	
.item_name{
	line-height:1;
}
.item_name_jp{
font-size:8px;
}


/*スマホ*/
@media screen and (max-width:640px){
.sp_br{
display: block;
}
.item_list li {
flex-basis: 100%;
}
.more_btn {
width:90%;
}
ul.item_list {
font-size:15px;
}
}


/*背景カラー*/
.bg_color1{/*ピンク系*/
background: #e2d9d9;
}
.bg_color2{/*ベージュ系*/
background: #e4e1d0;
}
.bg_color3{/*ブルー系*/
background:#d9e0e2;
}
.bg_color4{/*グリーン系*/
background: #d9e2da;
}
.bg_color5{/*濃茶*/
background: #795548;
    color: white;
}
.bg_color6{/*薄いグレー*/
background:#f7f7f7;
}

@media screen and (min-width:641px) and (max-width:1024px){

}
@media screen and (max-width:640px){
.llR{
font-size:25px;
}
}

/* ページトップに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 30px; 
  height: 30px;  
  background-color: #A3A3A3;
  color: #ffffff;
  padding: 10px;
  font-size: 20px; 
  text-decoration: none;
  display: flex;
  justify-content: center;  
  align-items: center; 
  transition: background-color 0.3s ease;
  z-index: 9999;  
}
.back-to-top:hover {
  background-color: #D5D5D5;
}    

/*共通CSSここまで*/

 
/* ----- 背景用の動画ファイル ----- */
.video_wrapper {
   position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    top: 70px;
}
#bg-video{
position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    top: 0;
    z-index: -100;
    background: url(poster.jpg) no-repeat;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
}
@media screen and (max-width:640px){
.video_wrapper{
width: 100%;
overflow: hidden;
height: 100vh;
}
#bg-video {
width: auto;
    position: absolute;
    height: 100vh;
    top: 0;
}

.header-title div.inner {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 15%;
}
}

 
 
 
.center{
text-align: center;
}


.shadow{
text-shadow: 2px 3px 15px black;
}
section div.inner {
max-width: 1000px;
margin:0 auto;
}

picture img {
    width: 100%;
}
.header-title{
color:white;
 position: relative; /*必ず必要*/
 z-index: 2; /*必ず必要*/
 justify-content: center;
 align-items: center;
 text-align:center;
 margin: auto;
 font-size:300%;
 text-shadow: 2px 3px 15px black;
 letter-spacing: 10px;
 height: 100vh;
 opacity: 0;
  animation-name:fade-in3;
  animation-duration:2s; 
  animation-timing-function: ease-out; 
  animation-delay:1s; 
  animation-iteration-count:1; 
  animation-direction:normal; 
  animation-fill-mode: forwards; 
}
@keyframes fade-in3 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

@media screen and (max-width:767px){
.header-title {
font-size: 5vw !important;
height: auto;
}
.header-title div.inner{
display: table-cell;
vertical-align: middle;
}
}


div.bg_pink{
background-image: url(https://www.rakuten.ne.jp/gold/opale/category_page/sotsuen/pinkbg.jpg);
}
h2{
font-size:1em;
font-weight: normal;
line-height: 1.9;
text-align: left;
padding:1em;
max-width: 1200px;
margin: 0 auto;
}
p.arrow_down {
display: none;
}
.headline1{
font-size: 28px;
padding-left: 10px;
border-left: 10px solid;
text-align: left;
font-weight: normal;
}
.headline1 span{
font-size:80%;
}


.fs150{
font-size: 150%;
}
.text_left{
text-align: left;
}
.item_list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.item_list h3{
font-size: 5vw
}
.item_list_wrapper .item_list li {
    list-style-type: none;
    text-align: center;
    width: calc((100% - 80px) / 4);
    margin: 0 5px 30px;
    padding-bottom: 1.5em;
    background:#f3f3f3;
    -webkit-transition: 0.8s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
@media screen and (max-width: 767px) {
    .item_list li {
        flex-basis: 44%;
    }
 
 .item_list a img {
     min-height: calc(100vw / 2);
    }
}

.item_list li:hover,.item_list li:active {
    transform: scale(1.1);
 
}
.item_list li span.price{
text-align: right;
font-size: 12px;
display: block;
padding-right: 10px;
}

.item_list a {
text-decoration: none;
color:#343c40;
  
}
.item_list p.desc{
font-size: 80%;
line-height: 1.5;
padding: 10px;
text-align: left;
}

.item_list a img {
    display: block;
    width: 100%;
    max-height: 300px;
	height:calc((100vw / 3) - 50px );
    object-fit: cover;
    padding-top: 0;
    margin-top: 0;
}

.item_name {
    line-height: 1;
}
.item_name_jp {
    font-size: 8px;
}

figure.productimage-box {
    padding: 0px;
    margin: 0px;
}

.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
.fadein-top {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
  text-align: center;
  display: inline-block;
}
/*pc*/
@media screen and (min-width:641px){
.fadein-top{
  margin: 0 0 0 100px;
  float: left;
}
.item_list.square img {
    object-fit: cover;
    max-height: 300px;
}
}
.top-copy {
    background: #E8E8E8;
    overflow: auto;
}
    

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
h3.title{
font-size: 40px;
letter-spacing: 3px;
text-align: center;
}
h3.title+p{
text-align: center;
font-size:20px;
}
.title_box{
padding:3em 0px;
}

.second_color{
background: #ecf8f8;
}

.row {
display: flex;
align-items: center;
justify-content: center;
}


@media screen and (min-width:768px){
.sp_only{
display: none;
}
}
/*スマホ*/
@media screen and (max-width:640px){
div.bg_pink{
flex-direction: column;
padding:20px;
}
.headline1{
font-size: 22px;
}
}
 
 
 /*コーディネート例部分*/
div.cat_comment1_wrap {
    background-image: url(https://ops777.itembox.design/item/category_page/coordinate/light-blue-bg.jpg);
    background-repeat: no-repeat;
    background-size: 90% 90%;
    background-position: center bottom;
    max-width: 1300px;
    margin: 5em auto;
}

.coordinate-flex-box {
    display: flex;
    justify-content: space-between;
}

.coordinate-flex-box .left img{
max-width:500px !important;
box-shadow: 1px 1px 4px 2px #ececec;
width: 100%;
}
.coordinate-flex-box .left {
    margin-bottom: 60px;
    flex-basis: 45%;

}
.coordinate-flex-box .right {
    flex-basis: 50%;
margin-bottom: 60px;
}

.coordinate-flex-box .top_right_inner {
    position: relative;
    height: 65%;
}
.coordinate-flex-box figure.img1 {
    position: absolute;
    width: 55%;
    top: 0;
    left: 0;
    margin: 0;
    text-align: left;
}

.coordinate-flex-box figure.img2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    margin: 0;
    text-align: left;
}

.coordinate-flex-box figcaption{
font-size: 11px;
margin-left:10px
}

.coordinate-flex-box img.img1, .coordinate-flex-box img.img2 {
    width: 100%;
    box-shadow: 14px 13px 3px 0px #adadad24;
}
.coordinate-flex-box .bottom_right_inner {
    height: 35%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
}
.coordinate-flex-box .bottom_right_inner h3 {
    font-size: 200%;
    letter-spacing: 3px;
    margin: 0px !important;
    font-weight: 100;
}
.coordinate-flex-box .bottom_right_inner p{
margin-bottom:0px;
letter-spacing: 1px;
font-size:90%;
line-height: 1.7;
text-align: left;
}
.coordinate-flex-box .bottom_right_inner img {
    width: 45% !important;
}
a.check-btn {
    background: #9fa6a7;
    font-size: 80%;
    padding: 3px;
    color: white !important;
}
@media screen and (max-width:640px){
.coordinate-flex-box{
flex-direction:column;
}

.coordinate-flex-box div.cat_comment1_wrap {
    background-position: center top;
    padding-top: 10%;
    background-size: 95% 100%;
}
.coordinate-flex-box .left {
    width: 90%;
    margin-left: 10%;
margin-bottom:-40px;
}
.coordinate-flex-box .top_right_inner {
    height: 100vw;
}

.coordinate-flex-box .bottom_right_inner {
    padding: 10px;
}
} 
    
/*ページ内リンク*/
.menu_btn {
    margin: 50px 0;
}  
@media screen and (min-width:641px){
.menu_btn{
  flex-wrap: wrap;
    display: flex;
    justify-content: center;
    max-width: 1200px;
}
} 
@media screen and (min-width:641px){
.menu_btn2{
    flex-wrap: wrap;
    display: flex;
}
} 
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 60px;
	color: #333;
    font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	transition: 0.3s;
    margin: 0 auto;
	border: 1px solid #333;
}   
.btn02 a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 300px;
	height: 60px;
	color: #333;
	font-size: 20px;
	font-weight: 200;
	text-decoration: none;
	transition: 0.3s;
    margin: 0 auto;
	border: 1px solid #333;
    letter-spacing: 3px;
}   
.btn01 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #333;
}
.btn02 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #333;
}
.btn01 a:hover {
	background-color: #c0cbcd;
	border: 1px solid #333;
}
.btn02 a:hover {
	background-color: #ffffff;
	border: 1px solid #333;
}
.btn01,.btn02 a:hover::after {
	border-color: #f2f2f2 #f2f2f2 transparent transparent;
}  
 
@media screen and (min-width:641px){
.btn01{
flex-basis: 30%;
}
} 
@media screen and (min-width:641px){
.btn02{
    display: flex;
    width: 100%;
}
} 

a.anchor{
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}    
    
    
/*アンケート部分*/  
.box_how {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 70px 0;
  align-items: center;
}

.text_how {
  padding: 0 13px;
  margin: 0;
  width: 100%;
  align-items: center;
}

.text_how1 {
  padding: 0 13px;
  margin: 15px 0 0 0;
  width: 90%;
  align-items: center;
  text-align: left;
  color: #C44F51;
  font-weight: bold;
}
.text_how2 {
  padding: 0 13px;
  margin: 2px 0 0 0;
  width: 90%;
  align-items: center;
  text-align: left;
  font-size: 10pt;
}


.pict_how {
  width: 60%;
}

.pict_how img {
  width: 100%;
  height:auto;
}

.box_how:nth-child(even) {
  flex-direction: row-reverse;
}
.box_how:nth-child(even) .text {
  text-align: right;
}
.box_how:nth-child(even) .pict {
  margin-left: 0;
  margin-right: 3%;
}

@media (max-width:640px) {
  .box_how {
    flex-direction: column;
  }
  .box_how:nth-child(even) {
    flex-direction: column;
  }
  .text_how {
    text-align: center;
  }
  .box_how:nth-child(even) .text {
    text-align: center;
  }
  .pict_how {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .box_how:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .pict_how img {
    width:100%;
    height:auto;
  }
}
    
/*ページトップ*/ 
#pagetop {
    position: fixed;
    right: 0;
    bottom: 0;
    text-indent: -9999px;
    margin: 0;
}
#pagetop a {
    position: relative;
    display: block;
    width: 65px;
    height: 65px;
    background: #818181;
    transition: opacity .6s ease;
}
#pagetop a:hover {
    opacity: .3;
}
#pagetop a::before {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    content: '';
    transform: rotate(-45deg);
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
@media screen and (max-width:767px) {
#pagetop a {
    width: 45px;
    height: 45px;
}
#pagetop a::before {
    top: 5px;
    width: 10px;
    height: 10px;
}
}
    
/*目次*/ 
.l_toc {
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    font-weight: bold;
}

.l_toc a {
    text-decoration: none;
    color: #fff;
}

.l_toc ol {
    background-color: #464646;
    padding-left: 0;
    list-style: none;
    counter-reset: section;
    padding: 20px;
}

.child_ol li {
    padding-left: 20px;
}