@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#header-container-in.wrap { max-width: 1200px; }
#header-container { border-bottom: 1px #F5E09F solid; }
/*===================================
    コンテンツ
===================================*/
#content { min-height: 80vh; }
.content-in { display: block; }
/*#content-in.wrap { width: 1200px; }*/
.main { padding: 0px; width: 100%; border-radius: 0px; border: none; background-color: transparent; }
.content-home { margin-top: 0px; }
.content-home #content-in.wrap { width: 100%; }
.article ul li { margin: 0px; }
.no-sidebar .content .main.no-home { margin: 0px auto; max-width: 1200px; }
.mobile-menu-buttons { background-color: #230000; }
/*===================================
    HOME
===================================*/
#top-image { position: relative; width: 100%; height: 90vh; background-image: url(./images/top-image.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom center; box-sizing: border-box; }
#top-image-message {
    position: absolute;
    display: block;
    width: 98%;
    bottom: 10px;
    left: 10px;
    box-sizing: border-box;
}
#top-image-message-sp {
    display: none;
    position: absolute;
    height: 100%;
    top: 10px;
    right: 10px;
}
/*
#top-image-foot { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; vertical-align: bottom; }
*/
.clip-image { position: relative; margin: 0px; padding: 0px; width: 100%; height: 62px; }
.clip-image-left { position: absolute; bottom: 0px; left: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-right { position: absolute; bottom: 0px; right: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-center {
    position: absolute;
    margin-left: 50%;
    bottom: 0px;
    left: -300px;
    width: 600px;
    height: 62px;
    background-image: url("images/top-image-foot.svg");
    background-position: center bottom;
    background-size: auto;
    background-repeat: no-repeat;
}
.narrow_on { display: none; }
.narrow_off { display: inline; }
#welcome { position: relative; margin: 0px auto; padding: 70px 20px 100px; max-width: 1200px; }
.center-1200 { margin: 0px auto; max-width: 1200px; min-width: 1023px; }
#welcome h1 {  margin: 0px auto 0px; padding: 0px; font-weight: 600; font-size: 86px; color: #990000; text-align: left; }
#welcome .entry-title { margin: 0px; }
#welcome p { margin-top: 40px; text-align: left; font-size: 18px; }
#welcome-box-contents { margin-top: 60px; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: flex-end; }
#welcome-box-right { width: 800px; height: auto; overflow: hidden; border-radius: 30px; }
#welcome-box-right img { width: 100%; margin: 0px; vertical-align: bottom; }
#welcome-box-left { width: 300px; }
#welcome-box-left p:nth-child(2){ padding-bottom: 0px; margin-bottom: 0px;}
.welcome-more {
    position: relative;
    display: inline-block;
    margin: 0px auto;
    padding: 10px 80px 10px 30px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
}
.welcome-more::after {
    content: "＞";
    position: absolute;
    top: 10px;
    right: 20px;
}

#top-carpet {
    position: relative;
    margin: 100px 0px;
    width: 100%;
    height: 80vh;
    background-image: url("images/carpet.jpg");
    background-size: cover;
}
#top-carpet-box {
    position: absolute;
    top: 10%;
    right: 30px;
    padding: 20px;
    width: 40%;
    background-color: rgba(255, 255, 255, 50% );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px #fff solid;
    border-radius: 10px;
    color: #000;
}
#top-carpet-box h1 { color: #000; }
#top-carpet-box .sub-title {  font-size: 18px; font-weight: 400; }
#top-saffron {
    position: relative;
    margin: 100px 0px;
    width: 100%;
    height: 80vh;
    background-image: url("images/saffron.jpg");
    background-size: cover;
    background-position: center center;
}
#top-saffron-box {
    position: absolute;
    top: 10%;
    left: 30px;
    padding: 20px;
    width: 40%;
    background-color: rgba(255, 255, 255, 50% );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px #fff solid;
    border-radius: 10px;
    color: #000;
}
#top-saffron-box h1 { color: #000; }
#top-saffron-box .sub-title {  font-size: 18px; font-weight: 400; }

.sub-title { display: block; font-size: 32px; font-weight: 100; margin-top: 10px; }
#top-products .sub-title { font-size: 18px; font-weight: 400; }

#feature { position: relative; margin: 100px auto; width: 100%; overflow: hidden; height: 80vh; }
#feature h1 { color: #000; }
#feature #video {
    position: absolute;
    top: -14%;
    left: 0px;
    z-index: -1;
    overflow: hidden;
}
#feature-box {
    position: absolute;
    top: 10%;
    right: 30px;
    padding: 20px;
    width: 40%;
    background-color: rgba(255, 255, 255, 50% );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px #fff solid;
    border-radius: 10px;
    color: #000;
}
#feature .sub-title {  font-size: 18px; font-weight: 400; }

#top-products { margin-top: 120px; }
#top-products h1 { margin: 0px auto 60px; padding: 0px; font-weight: 600; font-size: 42px; color: #fff; text-align: center; }
#top-products ul { display: flex; margin: 0px; padding: 0px; list-style: none; width: 100%; flex-wrap: wrap; justify-content: space-around; }
#top-products ul li {
    position: relative;
    display: block;
    margin: 0px 0px 20px 0px;
    width: 350px;
    height: 350px;
    text-align: center;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 9px 1px rgb(0 0 0 / 40%);
    box-shadow: 0px 0px 9px 1px rgb(0 0 0 / 40%);
    overflow: hidden;
    border-radius: 30px;
}
#top-products .top-support-item { vertical-align: bottom; line-height: 1.0em; }
#top-products .item-name {
    position: absolute;
    padding: 20px 10px 20px 30px;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 30%);
    z-index: 2;
    text-align: left;
    color: #fff;
}
#top-products p { margin-top: 20px; }
/*#top-products ul li:nth-child(even) { margin: 0px 4px; }*/


hr.separate-section {
    margin: 100px auto;
    width: 300px;
    height: 4px;
    border: none;
    background: rgb(230,0,18);
    background: linear-gradient(90deg, rgba(230,0,18,0) 0%, rgba(153,0,0,1) 20%, rgba(153,0,0,1) 80%, rgba(230,0,18,0) 100%);
}
#top-news { margin: 100px auto; }
#top-news-box {
    display: flex;
    margin: 0px auto;
    padding: 50px 0px;
    width: 1000px;
    background-color: #fff;
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    -webkit-box-shadow: 0px 0px 9px 1px rgb(0 0 0 / 20%);
    box-shadow: 0px 0px 9px 1px rgb(0 0 0 / 20%);
}
#top-news .news-left { width: 256px; padding: 0px 10px 0px 60px; font-size: 18px; }
#top-news h1 { margin: 0px; padding: 0px; font-size: 36px; font-weight: 600; color: #000; }
#top-news h1 span { display: block; margin-left: 0px; font-size: 18px; font-weight: 100; color: #000; }
#top-news .news-center { position: relative; width: 1px; background-color: #D1D0E0; }
#top-news .news-right { width: 743px; }
#top-news ul,
#top-news ul li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#top-news ul { padding-left: 45px; }
#top-news dl, #top-news dt, #top-news dd { margin: 0px; padding: 0px; }
#top-news dl { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
#top-news dt { width: 105px; color: #999999; }
#top-news dd { width: 548px; }
#top-news ul li { margin-top: 20px; }
#top-news ul li:first-child { margin-top: 0px; }
#top-news a { color: #EE7800; }

#admin-panel { display: none; }

#partnership {
    margin: 100px auto;
    max-width: 1000px;
}
#partnership h1 { text-align: center; }
#partnership ul,
#partnership li {
    margin: 0px;
    padding: 0px;
    width: 100%;
    list-style: none;
}
#partnership li { margin-bottom: 10px; }
#partnership img { width: 100%; }
#partnership .sub-title {  font-size: 18px; font-weight: 400; }

/************************************
** パンくずリスト
************************************/
.wrap { width: 100%; }
#breadcrumb.wrap { width: 1200px; background-color: transparent; }

/************************************
** ページ（サイドバー無）
************************************/
.no-sidebar .content .main[data-class="double"] { margin: 0px auto; padding: 0px 20px; max-width: 1200px; }
/*article[data-class="double"] { margin-left: 0px; margin-right: 0px; width: 850px; }*/


/************************************
** フッター設定
************************************/
.footer-in { border-top: 1px #F5E09F solid; }

/************************************
** コンテンツ（本文）設定
************************************/
h1.entry-title { margin: 0px auto 30px; padding: 0px; font-weight: 600; font-size: 36px; color: #fff; text-align: left; }
.article h2 { font-weight: 400; color: #F5E09F; background-color: #8B0007; border-radius: 20px; }
.article h3 { font-weight: 400; color: #000; border-color: #23256E; background-color: #ffffff; }
.article h4 { font-weight: 400; color: #000; border-color: #23256E; }
.products-link {
	display: inline-block;
	padding: 10px 60px;
	background-color: #660000;
	color: #F5E09F;
	border-radius: 100px;
	text-decoration: none;
}

/************************************
** about設定
************************************/
.about-box {
	display: flex;
	width: 100%;
	align-content: space-between;
	justify-content: space-between;
}
.about-left, .about-right { width: 48%; }
.about-left dl,
.about-left dt,
.about-left dd { margin: 0px; padding: 0px; }
.about-left dl { display: flex; padding: 10px; border-bottom: 1px #ccc dashed; flex-wrap: nowrap; }
.about-left dt { width: 120px; font-weight: 600; word-break: keep-all; }
.about-left dd { flex: 1; }
.about-right dl,
.about-right dt,
.about-right dd { margin: 0px; padding: 0px; }
.about-right dt { margin-bottom: 20px; font-weight: 600; }

/************************************
** 商品ページ設定
************************************/
.base-list { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; }
.base-item { width: 320px; height: 480px; margin-bottom: 20px; }
/************************************
** お問い合わせ・よくある質問設定
************************************/
#faq h3 { margin-top: 20px; margin-bottom: 0px; padding-left: 50px; }
#faq p { margin: 0px; padding: 20px 0px; }
.ac > li {
  /* margin-bottomにすると変な動きをするのでpaddingにする */
  padding-bottom: 6px; 
  list-style: none;
}
.ac-label  {
  cursor: pointer;
  position: relative;
}
.ac-content {
  display: none;
}
/* .ac-labelを親要素としてアイコン位置を絶対値で指定 */
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #140F4B;
}
/* .icon-wrapの中でプラスを中央に位置させるために.iconを親要素に設定 */
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* プラスアイコン */
/* ２本の線を.icon-wrapの中央に並行に重ねる */
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* そのうち1本を縦にする */
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.contact-form-button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #95D469;
    color: #fff;
    border-radius: 25px;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms linear;
}
.contact-form-button:hover { color: #fff; background-color: #638D46; }
#contact table,
#contact table th,
#contact table td { border-color: #D9EEFD; }
#contact th { font-weight: 100; color: #fff; background-color: #660000; }
#contact tr { background-color: #ffffff; }
#contact th, #contact td { padding: 10px 20px; }
#contact textarea { height: 300px; resize: vertical; }
#contact input[type="submit"] {
	background-color: #660000;
	color: #fff;
	border-color: #140F4B;
	border-radius: 50px;
	transition: background-color 200ms linear, color 200ms linear;
	font-size: 18px;
}
#contact input[type="submit"]:hover { color: #fff; background-color: #A10000; }
#contact input[type="button"] {
	width: 100%;
	font-size: 18px;
	border-radius: 50px;
	padding: 10px 20px;
	border-width: 1px;
	cursor: pointer;
	margin-bottom: 10px;
}
.err { color: #AB0000; font-weight: 400; }


/************************************
** お知らせ一覧設定
************************************/
#list { padding-top: 30px; }
.entry-card-thumb { display: none; }
.entry-card-content { margin-left: auto; margin-right: auto; width: 100%; color: #fff; }
.entry-card-title { font-size: 30px; font-weight: 100; color: #F5E09F; border-bottom: 1px #525973 solid; }
.entry-card-snippet { margin: 20px 0px; font-size: 16px; }
.pagination-next-link { border-color: #23256E; color: #23256E; border-radius: 10px; }
.page-numbers { border-color: #23256E; background-color: #ffffff; color: #23256E; }
.pagination .current { background-color: #23256E; color: #ffffff; }
.a-wrap:hover { background-color: rgba( 255, 255, 255, 25% ); }
.mobile-footer-menu-buttons { display: none; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1640px){
    #feature #video {
        top: auto;
    }
}
@media screen and (max-width: 1440px ){
    #feature #video {
        height: 80vh;
        max-width: none;
    }
}
@media screen and (max-width: 1199px){
    .main.no-home { margin: 0px; padding: 0px 20px; }
    #breadcrumb.wrap { width: 100%; }
}
/*1130px以下*/
@media screen and (max-width: 1130px){
    .aside-item { height: auto; padding: 0px 10px;}
    .top-aside-mini { display: block; }
    #top-aside-item-01 { background-image: none; border-radius: 0px; }
    #top-aside-item-02 { background-image: none; border-radius: 0px; }
    .aside-contents { margin: 0px; padding: 40px; width: 100%; }
    #top-aside-item-02 .aside-contents a { left: auto; right: 35px; }
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
    #header-container-in { width: 100%; display: none; }
    
    #navi { position: absolute; top: 100%; left: 0px; width: 100%; float: none; z-index: 2; }
    .navi-in > ul { display: flex; width: 100%; flex-wrap: nowrap; }
    .navi-in > ul li { display: block; margin-left: 0px; width: 25%; height: auto; line-height: normal; text-align: center; }
    
    main.main { margin: 0px; }
    .center-1200 { width: 100%; min-width: auto; }
    
    #welcome-box-contents { display: block; }
    #welcome-box-right { width: 100%; }
    #welcome-box-left { width: 100%; }
    .welcome-more {
        position: relative;
        display: inline-block;
        margin: 0px auto;
        padding: 10px 80px 10px 30px;
        background-color: #000;
        color: #fff;
        text-decoration: none;
        border-radius: 100px;
    }
    
    #top-products ul { justify-content: space-around; }
    
    #top-news { padding: 0px 10px; }
    #top-news-box { width: 100%; padding: 50px 20px; }
    #top-news .news-left { width: 100%; padding: 0px; }
    #top-news .news-center { display: none; }
    #top-news .news-right { width: 100%; }
    #top-news h1 { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #23256E solid; }
    #top-news ul { padding-left: 0px; }
    #top-news ul li { padding-bottom: 20px; border-bottom: 1px #D9EEFD solid; }
    
    .about-box { display: block; }
    .about-left, .about-right { width: 100%; }
    .about-left dl,
    .about-left dt,
    .about-left dd { margin: 0px; padding: 0px; }
    .about-left dl { display: flex; padding: 10px; border-bottom: 1px #fff dashed; flex-wrap: nowrap; }
    .about-left dt { width: 120px; font-weight: 600; word-break: keep-all; }
    .about-left dd { flex: 1; }
    .about-right dl,
    .about-right dt,
    .about-right dd { margin: 0px; padding: 0px; }
    .about-right dt { margin-bottom: 20px; font-weight: 600; }

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
    
    #top-carpet {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #top-carpet-box {
        position: relative;
        margin: 0px auto;
        width: 90%;
        top: auto;
        right: auto;
    }
    #top-saffron {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #top-saffron-box {
        position: relative;
        margin: 0px auto;
        width: 90%;
        top: auto;
        left: auto;
    }
    #feature {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #feature-box {
        position: relative;
        top: auto;
        right: auto;
        width: 90%;
    }
    /*
    #feature-box {
        position: relative;
        top: auto;
        right: auto;
        padding: 20px;
        width: 100%;
    }
    */
    img.alignright { float: none; width: 100%; margin: 0px; }
    
    .appeal div.appeal-in { height: 800px; }
    #top-image-message { display: none; }
    #top-image-message-sp { display: block; }
    
    #top-news dl { display: block; }
    #top-news dt { width: 100%; }
    #top-news dd { width: 100%; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    .about-left dl,
    .about-left dt,
    .about-left dd { margin: 0px; padding: 0px; }
    .about-left dl { display: block; padding: 10px; }
    .about-left dt { margin-bottom: 10px; width: 100%; font-weight: 600; }
    .about-right dl { margin-top: 30px; }
    
    #contact table,
    #contact table thead,
    #contact table tbody,
    #contact table tr,
    #contact table th,
    #contact table td { display: block; width: 100%; }
}