/*
Theme Name: 自分で作るテーマ
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Playfair+Display+SC:400,700,900);abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:98%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:1.0625rem;font-family:-apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif;}p{margin:1rem auto;line-height:1.5}a{color:#000}a:focus{color:#959595}body{background-color:#fff}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}small{font-size:0.8rem}sub,sup{font-size:0.8rem;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}strong{font-weight:bold}strong.red{color:#e00909;font-weight:normal}i{font-weight:normal;font-style:italic}input[type=email],input[type=text],input[type=url]{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e0e3e4;padding:0.5rem}textarea{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e0e3e4;padding:0.5rem}p{margin:5px auto}.wp-caption{}.wp-caption-text{}.sticky{}.gallery-caption{}.bypostauthor{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{}main .navigation{padding:20px;text-align: center;}#sub{padding:20px}#sub .widget{padding:20px}
/*# sourceMappingURL=style.css.map */
/* IE8〜11はメイリオ */
@media screen\0 {
  body {
    font-family: 'Segoe UI', /* Windowsの欧文 */
                 Meiryo,     /* メイリオ */
                 sans-serif;
  }
}

/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}
img{
	image-rendering: -webkit-optimize-contrast;
}

:root {
  --header_bg:#F6F5F1;
  --header_nav_li_color: #b36074;
  --header_color:#b36074;
  --logo_color: #ffffff;
  --bg_pink:#f8f8f8;
  --a_color:#b36074;
  --body_color:#5a3e36;
  --body_bg:#ffffff;
  --footer_bg:#F6F5F1;
  --footer_color1:#b36074;
  --footer_color2:#b36074;
  --line_pink:#b36074;
  --sns_btn:#b36074;
  --blog_bg: #fff5f6;
  --blog_title:#c77192;
}

@media only screen and (min-width: 768px){
	.sp{
		display:none!important;
	}
}
@media only screen and (max-width: 767px){
	.pc{
		display:none!important;
	}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:100%;
  margin:0 auto;
}

.slider img {
  width:100vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
スライダーのためのcss ここまで
===================================*/

body {
margin: 0;
font-family: Arial, sans-serif;
  background-color: var(--body_bg);
  color: var(--body_color);
  font-family: 'PT Serif', serif;
  width: 100%;
}

main {
  padding-top: 146px;
}

a {
  color: var(--a_color);
  text-decoration: none;
  transition: transform .3s;
}

a:hover {
  opacity: 0.6;
}

.center {
  text-align: center;
}

.campaign_center {
	display: flex; /* フレックスボックスで整列 */
  flex-direction: column; /* 子要素を縦方向に並べる */
  align-items: center; /* 水平方向で中央揃え */
  list-style: none; /* liの箇条書きマーカーを削除 */
  padding: 0; /* 余白をリセット */
  margin: 0; /* 余白をリセット */
}

.bg_pink {
  background-color: var(--bg_pink);
  padding: 0.5em 1em;
}

.header {
  position: fixed;
  background-color: var(--header_bg);
  padding-bottom: 0.5em;
  text-align: center;
  width: 100%;
  z-index: 999;
}

.header nav{
  background-color: var(--header_ul_color);
}


footer {
  background-color: var(--footer_bg);
  text-align: center;
  padding: 1em;
  justify-content: space-between;
}

.footer_nav {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer_nav a {
  color:  var(--footer_color1);
}

footer ul li {
  padding: 0.5em;
}
.footer_nav li span.menu-item-description {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.5em;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: var(--logo_color);
  display: block;
}

.header_nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}
  
.header_nav li {
  padding: 0.2em 1em;
  box-sizing: border-box;
  text-align: center;
}

.header_nav li strong{
  display: block;
  text-align: center;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--header_nav_li_color);
}

.header_nav li span.menu-item-description{
  display: block;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--header_nav_span_color);
  margin-top: 0.5em;
}

.header_nav a,
a {
  transition: .3s;
  text-decoration: none;
}

.header_nav a:hover,
a:hover {
  opacity: 0.6;
}

.title {
  text-align: center;
  margin: 1em 0 0.5em 0;
  font-size: 1.5em;
}

.title span {
  font-size: 0.7em;
  display: block;
  margin-top: 0.5em;
}

.shop_info {
  width: 60%;
  line-height: 1.3em;
}

.shop_info {
  margin: auto;
  text-align: left;
}

.shop_info table {
  margin: 1em auto;
  width: 80%;
}

.studio a ,
.line img {
  width: 50%;
}

.shop_info table th,
.shop_info table td {
  padding: 0.5em 0;
  font-weight: normal;
}

.price {
  width: 100%;
  line-height: 1.3em;
  margin: auto;
  text-align: left;
}

.price table {
  margin: 1em auto;
  width: 50%;
}

.price table th,
.price table td {
  padding: 0.5em 0;
  font-weight: normal;
}
.shop_img {
  width: 90%;
  text-align: center;
  margin: auto;
}

.shop_img img {
  width: 25%;
  margin: 0.5em;
}

.map {
  text-align: center;
}

.result-title {
  margin: 1em;
  font-size: 1.8em;
}

.gallery {
  width: 60%;
  margin: 1em auto;
  justify-content: center;
}
  
.gallery img {
  width: 100%;
  padding: 0.5em;
}

.gallery p {
  font-size: 1.3em;
  margin: 0.5em 0;
}

.shop_info {
  width: 60%;
  margin: auto;
  text-align: left;
}
  
.shop_info table {
  margin: 1em auto;
  width: 100%;
}

.shop_info table th,
.shop_info table td {
  padding: 0.5em 0;
}

  
.shop_img {
  width: 90%;
  text-align: center;
  margin: auto;
}
  
.shop_img img {
  width: 25%;
  margin: 0.5em;
}
  
.map {
  text-align: center;
  width: 80%;
  height: 400px;
  margin: 2em auto;
}
  
.result-title {
  margin: 1em;
  font-size: 1.8em;
}
  
.pro {
  width: 90%;
  display: flex;
  margin: auto;
  justify-content: center;
}

.pro img {
  width: 30%;
}

.item {
  display: inline-block;
  width: 30%;
  margin: 0.5em;
}

.campaign_item {
  display: inline-block;
  width: 40%;
  margin: 0.5em;
}

.campaign_item img,
.item img,
.room img,
.studio img,
iframe {
  width: 100%;
}

.sns, .sns2 {
  display: flex;
  justify-content: center;
}

.sns a {
  margin: 1em;
  justify-content: center;
  align-items: center;
  padding: 1em 0.5em;
  border: 1px solid var(--sns_btn);
  box-shadow: 5px 5px   var(--sns_btn);
  background-color: #fff;
}

.sns2 a {
  margin: 1em;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: 1px solid  var(--sns_btn);
  box-shadow: 5px 5px   var(--sns_btn);
  width: 300px;
  background-color: #fff;
}

.sns_a {
  display: flex;
  width: 300px;
}

.room {
  width: 25%;
  padding: 0.5em;
}

.room_p {
  text-align: center;
}

.studio {
  display: center;
  flex-wrap: wrap;
  padding: 1em;
  margin: auto;
  width: fit-content;
}

.icon_wrap {
  margin-right: 1em;
}

.contents {
  max-width: 1100px;
  width: 100%;
  margin: 1em auto;
  padding: 1em;
}

.menu-btn {
  display: none;
}

.title2 {
  text-align: left;
  border-bottom: 3px solid var(--line_pink);
  padding: 0.5em;
  line-height: 1.3;
}

.title3 {
  text-align: left;
  padding: 0.5em;
}

.li_p {
  padding: 0.5em;
}

.guide {
  padding-right: 1em;
  color: var(--line_pink);
}

.frame {
  border: 2px solid var(--line_pink);
  padding: 1em;
  margin-top: 2em;
}

.line {
  width: 50%;
  justify-content: center;
  margin: 1em auto;
}


h2 {
  font-size: 1.2em;
}

.red{
  color: red;
}

.price table th,
.price table td {
  padding: 0.5em;
  border-bottom: 1px solid var(--line_pink);
}

.logo img {
	width: 100px;
}

.madori img {
	width:50%;
}

.mb {
	margin-bottom: -30px;
}

.list_blog {
  width: 100%;
}

.list_blog img {
  width: 100%;
  margin: auto;
  display: block;
}

.blog_title {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--blog_title);
}

.list {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  justify-content: start;
}

.blog1 {
  width: 30%;
  background-color: var(--blog_bg);
  box-sizing: border-box;
  padding: 0.5em 1em;
  margin-right: 5%;
  margin-bottom: 1em;
}

.blog1:nth-child(3n) {
  margin-right: 0;
}

.single_title {
  font-size: 1.5em;
  margin-left: 0.5em;
}

.single_sentence {
  margin: 0.5em 1em;
}

.left {
  text-align: left;
}

.item_category {
  margin-top: 30px;
}

.item_category span {
  color: #b36074;
}

.item_category a {
  margin: 1em;
}

.studio_kagu {
	display:block;
}

@media screen and (min-width: 761px) {
  .header_nav {
      list-style: none;
      justify-content: center;
      display: flex;
	  margin-top: -15px;
	  position: relative;
	  z-index: 100;
  }
}

@media screen and (max-width: 760px) {
  .logo {
    margin-bottom: 0;
    font-size: 0.7em;
    }

  header{
    text-align: right;
  }
  
  main {
    padding-top: 70px;
  }

  .title {
    font-size: 1.5em;
  }

  .sns a {
    margin: 0.5em;
    width: 30%;
    display: block;
  }
  
  h2 {
    font-size: 1em;
  }

  .sns_center{
    text-align: center;
  }

  .sns {
    display: flex;
  }

  .item img {
      width: 50%;
  }

  .item,
  .shop_info {
      width: 90%;
  }

  .map {
      width: 100%;
      height: 300px;
  }

  .pro {
      display: inline-block;
  }

  .room,
  .gallery img {
      width: 45%;
  }

  .room img,
  .studio a {
      width: 100%;
  }

  .line img {
      width: 100%;
  }
  
  .studio {
      padding: 0;
  }
	.shop_info table td {
 		text-align: left;
		margin-left:1em;
	}

    /* Nav items */
    .menu {
      list-style: none;
      position: absolute;
      width: 100%;
      height: calc(100vh - 69px);
	  overflow:scroll;
      top: 0;
      left: 0;
      margin-top: 69px;
      padding: 0 0 10px 0;
      clear: both;
      background: var(--header_bg);
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
      transform: scale(1, 0);
      transform-origin: top;
    }
    
    /* Hamburger menu button */
    .menu-btn:checked ~ .menu {
      transform: scale(1, 1);
      transform-origin: top;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    /* Hamburger menbu text */
    .menu a {
      text-decoration: none;
      font-weight: 500;
      letter-spacing: 2px;
      font-size: 16px;
      text-transform: capitalize;
      color: var(--body_color);
      opacity: 0;
      transition: 0.5s;
    }
    
    .menu li {
      border-top: 1px solid var(--body_color);
      padding: 15px 0;
      margin: 0 54px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .menu-btn:checked ~ .menu a,
    .menu-btn:checked ~ .menu li {
      opacity: 1;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
    }
    
    .menu-btn {
      display: none;
    }
    
    .menu-icon {
      display: inline-block;
      position: relative;
      cursor: pointer;
      padding: 24px 14px;
      -webkit-tap-highlight-color: var(--body_color);
    }
    
    .navicon {
      background: var(--body_color);
      display: block;
      height: 3px;
      width: 26px;
      position: relative;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    .navicon:before,
    .navicon:after {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      background: var(--body_color);
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    .navicon:before {
      top: 9px;
    }
    
    .navicon:after {
      bottom: 9px;
    }
    
    /* Hamburger Menu Animation Start */
    .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
    .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
    .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
      top: 0;
    }
    .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      bottom: 0;
    }
    
    .menu-btn:checked ~ .menu-icon .navicon {
      background: rgba(0, 0, 0, 0);
      transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    /* Hamburger Menu Animation End */
    
    /* Navbar Container */
    .navtext-container {
      width: 100%;
      height: 52px;
      position: absolute;
      box-sizing: border-box;
      display: flex;
      /* justify-content: center; */
      align-items: center;
      left: 0;
      padding-left: 1.5em;
    }
    
    /* Navbar Text */
    .navtext {
      position: absolute;
      text-transform: uppercase;
      color: var(--body_color);
      letter-spacing: 4px;
      font-size: 20px;
    }
  
    .header_nav li span.menu-item-description,
    .item p{
        font-size: 0.8em;
    }

    .header_nav li strong {
        font-size: 1em;
    }

    .header {
        padding: 0.5em;
        text-align: right;
    }

    .contents {
        padding: 0.5em;
    }

    .h50 {
        height: 50vh;
    }

    iframe {
        height: 250px;
    }

    .gallery {
        margin: 1em auto;
        padding: 1em;
        justify-content: center;
        width: 100%;
    }
    .center{
        flex-wrap: wrap;
        justify-content: center;
    }
    .item{
        width: 49%;
        margin: 0.5em 0;
        margin-right: 2%;
    }
    .item:nth-child(even){
        margin-right: 0;
    }
    .item img{
        width: 100%;
        padding: 0;
    }

    .item_li {
      display: flex;
    }

    .shop_info {
      font-size: 1em;
    }

    .gallery p {
      font-size: 1.2em;
      margin: 0.5em 0;
    }

    .shop_info th {
      width: 25%; 
    }

    .shop_info table th,
    .shop_info table td {
      display: block;
    }
    
    .price table,
    .madori img{
      width: 100%;
    }
    
    .price table th,
    .price table td {
      padding: 0.5em;
      border-bottom: 1px solid var(--line_pink);
    }
	
    .logo img {
      width: 50px;
    }

    .footer_nav {
      display: block;
    }

    .footer_nav li span.menu-item-description {
      display: none;
    }

    .list {
      display: block;
    }

    .blog1 {
      width: 100%;
    }

    .single_title {
      font-size: 1.3em;
    }

    .icon_wrap {
      margin-right: 0;
    }

    .sns_p {
      font-size: 0.8em;
    }
	
	.mobile_left {
		text-align:left;
		padding:0 0.5em;
	}

  .campaign_item {
    width: 80%;
  }
}