@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;
}
.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;
}
.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;
}
@media screen and (min-width:641px){
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 60px;
    padding-bottom: 1.5em;
    flex-basis: 30%;
}

.item_list img{
	display:block;
	width:100%;
	height:auto;
	padding-top:0;
	margin-top: 0;
}	
@media screen and (max-width:640px){
ul.item_list {
    width: calc((100% - 80px) / 2);
    flex-wrap: wrap;
    display: flex;
}  
}   
.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;
}
footer{
background: #F5F5F5;
}
@media screen and (min-width:641px) and (max-width:1024px){
footer iframe{
height:450px;
}
}
@media screen and (max-width:640px){
footer iframe{
height:560px;
}
.llR{
font-size:25px;
}
}


/*共通CSSここまで*/

 
/* ----- 背景用の動画ファイル ----- */
.video_wrapper {
   position: absolute;
    width: 100%;
    height: 170vh;
    overflow: hidden;
    top: 70px;
}
#bg-video{
position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    top: 0;
    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: 30%;
    padding: 0 10% 0 15%;
}
}

 
 
 
.center{
text-align: center;
}


.shadow{
text-shadow: 2px 3px 15px black;
}
section div.inner {
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;

 text-shadow: 2px 3px 15px black;
 letter-spacing: 10px;
 height: 90vh;
 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:640px){
.header-title {
    font-size: 3vw !important;
    margin: 0 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%;
}
.headline2{
    font-size: 30px;
    text-align: center;
    letter-spacing: 5px !important;
    font-weight: 500;
    font-family: 'Montserrat',"KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
    
@media screen and (min-width:768px){
.headline2{
    padding: 50% 0 0 0;
    font-size: 50px;
}
}    
@media screen and (min-width:767px){
.headline2{
    padding: 25% 0 0 0;
}
}
@media screen and (max-width:640px){
.headline2{
    padding: 25% 0 0 0;
}
}

.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;
}
.item_list_wrapper2 li {
    list-style-type: none;
    text-align: center;
    width: calc((100% - 80px) / 4);
    margin: 0 20px 20px;
    padding-bottom: 1.5em;
    -webkit-transition: 0.8s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
   
       

.item_name_new{
    margin: 15% 0 5% 0;
    font-family: serif;
    letter-spacing: 0.15em;

}
.item_info{
    text-align: right;
    margin: 0 18% 0 0;
    font-family: serif;
    letter-spacing: 0.15em;
    font-size: 9pt;
    width: 100%;
}
@media screen and (max-width: 640px){
.item_info {
    margin: 0 5% 0 0;
}    
}




.item_list li span.price{
text-align: right;
font-size: 12px;
display: block;
padding-right: 10px;
}
    

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

.item_list img {
    display: block;
    width: 100%;
    height: auto;
}
@media screen and (min-width: 769px){
.item_list {
    width: 1000px;
}    
}  
@media screen and (max-width: 768px){
.item_list {
    width: 100%;
}    
}    
    
   
.item_name {
    line-height: 1;
}
.item_name_jp {
    font-size: 8px;
}


.lineup-new{
 display: flex;
 list-style: none;
 margin: 0 auto;
}


.lineup{
    display: flex;
    background: #cad5f4;
    border: 1px solid #999;
    padding: 10px;
}
.lineup>div{
    width: 50%;
    background: #FFF;
    border: 1px solid #999;
    padding: 10px;
}

.flex_box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    padding: 5px 0 0 0;
}
@media screen and (min-width: 800px){
.flex_box {
    width: 60%;
}
}
@media screen and (min-width: 768px){
.flex_box {
    width: 90%;
}
}
@media screen and (max-width: 640px){
.flex_box {
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    margin: 0 auto;
}
}
@media screen and (max-width: 640px){
.flex_box img{
    padding: 2% 0;
}
}
@media screen and (min-width: 641px){
.flex_box img{
    width: 93%;
    padding: 4% 1% 0 1%;
}
}
@media screen and (max-width: 640px){
.item_list .comingsoon{
    flex-wrap: wrap;
    display: flex;
}
} 
@media screen and (min-width: 641px){    
.item_list .comingsoon li {
    flex-basis: 23%;
} 
} 
     


.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;
}
}
.top-copy {
  background: #ffffff;
  overflow: auto;
}
.top-copy p{
  text-align: center;
}
.text_copy{
  letter-spacing: 0.06em;
  line-height: 2.1em;
} 
    

.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 (max-width:640px){
.row {
flex-wrap: wrap-reverse;
}
}
    
/*スマホ*/
@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;
  align-items: center;
}
@media (min-width:641px) {
  .text_how {
  width: 55%;
}
}
@media (max-width:640px) {
  .text_how {
  width: 80%;
}
}
.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;
    z-index:10000
}
#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;
}


.more_btn_s {
    display:inline-block;
    width: 15%;
    letter-spacing: 2px;
    font-size: 100%;
    border: 0.5px solid black;
    color: #292929 !important;
    text-align: center;
}

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

.more_btn_s .white{
color:white !important;
border:1px solid #FFFFFF !important;
}

.text_center{
text-align: center;
line-height: 1.7em;
margin: 22% 0;
}

 
/* スライド */
.scroll-box {
  width: 1200px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.f_one img{
 padding: 5%;
 width: 99%;
}
.f_area{
 margin: 0 auto;
}


@media screen and (max-width: 640px) {
.scroll-box{
  width: 100%;
}
} 
.scroll-box .f_area {
  display: flex;
  justify-content: center;
}
.scroll-box .f_area .f_one {
  width: 15%;
}
.scroll-box .f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}
.scroll-box .f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  transform: scale(1);
  transition: .5s;
}
.scroll-box .f_area .f_one a img:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 1024px) {
  .scroll-box {
    overflow-x: auto;
  }
  .scroll-box .f_area {
    justify-content: flex-start;
    overflow-x: scroll;
    padding: 0 0 15px;
  }
  .scroll-box .f_area .f_one {
    flex: 0 0 45%;
  }
}
@media screen and (max-width: 640px) {
  .scroll-box .f_area .f_one {
    flex: 0 0 70%;
  }
}   
section div.inner_wrapper{
max-width:1000px;
}
 
/*チェックボックス*/
input[type=checkbox] {
    display: none;
}
.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox01::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}

/* ラジオボタン01 */
input[type=radio] {
    display: none;
}
.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio01::before {
    background: #fff;
    border: 1px solid #231815;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio01::after {
    background: #ed7a9c;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -4px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 10px;
}
input[type=radio]:checked + .radio01::after {
    opacity: 1;
}

.section-line{
    height: 1px;
    border: none;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
    background-image: linear-gradient(to right, transparent, #ccc, transparent);
    
}
@media screen and (min-width: 641px) {
.section-line {
    width:80%;
}
}
@media screen and (max-width: 640px) {
.section-line {
    width:80%;
    margin: 5% 0;
}
}

@media screen and (min-width: 641px) {
.box_wrapper{
    padding: 0 30%;
    margin: 0 auto;
    text-align: left;
}
}
@media screen and (max-width: 640px) {
.box_wrapper {

    width: 100%;
}
}
.box_wrapper2{
    width: 90%;
    margin: 0 auto;
}
@media screen and (min-width: 641px) {
.color-img{
    width: 60%;
    margin: 0 auto;
}
}

.que{
    background: #F5F5F5;
    padding: 15px;
    line-height: 20pt;
    font-size: 11pt;
}
.ans{
    background: #FFFFFF;
    padding: 15px;
    line-height: 20pt;
    font-size: 11pt;
}
@media screen and (min-width: 641px) {
.que{
    width: 700px;
    margin: 0 auto;
}
}
@media screen and (min-width: 641px) {
.ans{
    width: 700px;
    margin: 0 auto;
}
}    

    
    
    
    
    
@media screen and (min-width: 641px) {
.pc-size{
    width: 100%;
    margin: 0 auto;
}
}
@media screen and (min-width: 641px) {
.pc-size2{
    width: 60%;
    margin: 0 auto;
}
}
@media screen and (max-width: 640px) {
.pc-size .pc-size2{
    display: none;
}
}  

@media screen and (max-width: 640px) {
.sc-size {
    width: 100%;
}
}    
@media screen and (min-width: 641px) {
.sp-size{
    display: none;
}
}   
    
    
    
@media screen and (min-width: 641px) {    
.item_position{
    padding: 10% 0 0 0;
}
} 

@media screen and (max-width: 640px) {  
.item_position4{
    padding: 0 10% 0 0;
}
}    
@media screen and (max-width: 640px) {  
.item_position3{
    padding: 0 0 0 20%;
}
}    
@media screen and (max-width: 640px) {  
.item_position2{
    padding: 0 10% 0 0;
}
}
@media screen and (max-width: 640px) {  
.item_position{
    padding: 0 5% 0 5%;
}
}    

    

    
    
/*comingsoon*/  
div.harf_wrapper img{

display: inline-block !important;
vertical-align: middle;
}
@media screen and (min-width: 641px) {    
div.harf_wrapper img{
    width: calc(86% / 4);
    padding: 2.2% 1% 0 1%;
}
}   
@media screen and (min-width: 800px) {    
div.harf_wrapper{
    margin: 0 auto;
    width: 800px;
}
} 
@media screen and (max-width: 640px) {    
div.harf_wrapper img{
    width: calc(90% / 2);
    padding: 3% 1.2% 0 1.2%;
}
}   
    
    
    
section.pic_left,section.pic_right{
margin: 0;
}
section.pic_right div.left_block{
padding:4%;
overflow: hidden;
}
.sp-row{
flex-wrap: wrap;
}
.sp-row div{
flex-basis: 100% !important;
}
}
.left_block , .right_block p{

}
.left_block img , .right_block img {
width: 100%;
}
.left_block h3 , .right_block h3 {
    font-size: 30px;
    letter-spacing: 2px;
}
section.pic_right div.left_block{
padding:4%;
overflow: hidden;
}
.left_block , .right_block {
}
    
@media screen and (max-width: 640px){
.left_block img , .right_block img {
width: 100%;
}
}
@media screen and (min-width: 641px){
.left_block img , .right_block img {
width: 75%;

}
} 
@media screen and (min-width: 641px){
.left_block {
text-align: left;
margin: 0 0 0 5%;
}
} 
@media screen and (max-width: 640px){
.left_block {
width: 100%;
text-align: left;
}
} 

    
.left_block h3 , .right_block h3 {
    font-size: 30px;
    letter-spacing: 2px;
}
section.pic_left div.right_block{
padding:4%;
overflow: hidden;
}
@media screen and (min-width:641px){
.sp_only{
display: none;
}
}
@media screen and (max-width: 640px)
.pic_right .row {
    flex-direction: column-reverse;
}
@media screen and (max-width: 640px)
section .row {
    flex-direction: column;
}
    
@media screen and (max-width: 640px){
h3{

text-align:center;
}
.gift_area section h3 {
    font-size: 4vw !important;
    text-align: center;
    margin: 3em 0;
}
.sp-row{
flex-wrap: wrap;
}
.sp-row div{
flex-basis: 100% !important;
}
} 
    
@media screen and (max-width:640px){ 
.only_pc {
    display: none;
}
} 
    
@media screen and (max-width:640px){ 
    .sp-topic{
        height: 4500px;
}  
} 
    
    
.shadow a{
    filter: drop-shadow(2px 3px 3px #c7b1b1);
}    
.cate img{
    margin: 2% 0;
}
@media screen and (max-width:640px){     
.cate {
    margin: 2%;
}
}
    
@media screen and (min-width:641px){     
 .wrapping-pc img {
     margin: 10%;     
}    
}