@charset "UTF-8";

/*
Theme Name: fotografía-info
Version: 1.1
Author: Owndmedia
*/


/* ************************************************************************************************
   共通
   ************************************************************************************************ */
html,body {
  width: 100%;
  height: 100%;
  font-size: 62.5%; /*ベースを10pxに設定*/
  letter-spacing: 0.04em;
  font-family: 'komorebi-gothic',YuGothic,'Yu Gothic',sans-serif;
  font-weight: 600;
  line-height: 2;
  color: #333333;
  background-color: #f0ece3;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dfd3c3' fill-opacity='0.22' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

@font-face {
  font-family: 'komorebi-gothic';
  src: url('css/fonts/komorebi-gothic/komorebi-gothic.eot');
  src: url('css/fonts/komorebi-gothic/komorebi-gothic.eot?#iefix') format('embedded-opentype'),
  url('css/fonts/komorebi-gothic/komorebi-gothic.woff') format('woff'),
  url('css/fonts/komorebi-gothic/komorebi-gothic.ttf') format('truetype');
  font-weight: normal;
}

h1 {font-size: 3.5rem;}
h2 {font-size: 3.3rem;}
h3 {font-size: 2.5rem;}
h4 {font-size: 2.2rem;}

p {font-size: 1.6rem;}
a {font-size: 1.6rem; text-decoration: none; color: #333333;}
li, th, td {font-size: 1.6rem;}

a:hover, a:focus {color: #596e79;}

img {max-width: 100%;}


/*改行*/
.br_pc {display: block;}

/* ボタン */
.btn01 {
  display: block;
  margin: 5rem auto 0;
  max-width: 280px;
  text-align: center;
  background-color: #596e79;
  font-size: 1.6rem;
  color: #FFF;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px dashed #FFF;
  box-shadow: 0px 0px 0px 5px #596e79;/* box-shadowで外枠を */
}

.btn01:hover {
  border-style: solid;
  color: #fff;
}

.btn02{
  font-size: 1.6rem;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  letter-spacing: 0.1em;
  color: #596e79;
  border-radius: 0.5rem;
  font-family: 'Kalam','komorebi-gothic', sans-serif;
}

a.btn02-border {
  padding: 1.3rem 3rem 1rem;
  border: 3px solid #596e79;
  border-radius: 0;
  border-radius: 100vh;
}

a.btn02-border:before {
  position: absolute;
  top: 3px;
  left: 4px;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 3px dotted #596e79;
  border-radius: 100vh;
}

a.btn02-border:hover:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn03{
  font-size: 1.6rem;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  letter-spacing: 0.1em;
  color: #596e79;
  border-radius: 0.5rem;
}


/* ページトップに戻るボタン */
#page_top{
  position: fixed;
  right: 2rem;
  bottom: 2rem;
}

#page_top:hover {
  filter: sepia(.8);
}


/* マウスドラッグした時の文字色 */
::selection {background: #dfd3c3;}


/* ページ縁取り */
html:before,
html:after,
body:before,
body:after {
  content: "";
  background: #596e79;
  position: fixed;
  display: block;
  z-index: 9998;
}

html:before {
  height: 9px;
  width: 100vw;
  left: 0;
  top: 0;
}

html:after {
  width: 9px;
  height: 100vh;
  right: 0;
  top: 0;
}

body:before {
  height: 9px;
  width: 100vw;
  bottom: 0;
  left: 0;
}

body:after {
  width: 9px;
  height: 100vh;
  top: 0;
  left: 0;
}


/* スクロールバー */
::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	background: #596e79;
}

::-webkit-scrollbar-thumb {
  background: #596e79;
  box-shadow: inset 0 0 0 2px #F0ECE3;
}

/* スクロールバー　Chromeの表示調整 */
html:after {width: 0;}

@-moz-document url-prefix() {
  html:after {width: 9px;}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  html:after {width: 9px;}
}

@supports (-ms-ime-align: auto) {
  html:after {width: 9px;}
}

@media screen and (max-width:1025px) {
  html:after {width: 9px;}
}


/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%;
}

.wrap{
  width: 1180px;
  padding: 0 3rem;
  margin: 0 auto;
}


/***** フッター *****/
footer{
  padding-top: 10rem;
  padding-bottom: 5rem;
}

small {
  font-size: 1.4rem;
  display: block;
  text-align: center;
  margin: 10rem 0 0;
}

.index-ttl{
   margin-bottom: 4rem;
}

.index-ttl__txt{
   font-family: 'Kalam','komorebi-gothic', sans-serif;
   font-weight: 400;
   letter-spacing: 0.06em;
   color: #596e79;
   margin: 0rem;
   line-height: 1;
}

.access-map iframe {
  filter: grayscale(.6);
  -webkit-filter:grayscale(.6)
}

.access-container {
  margin-top: 4rem;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.access-container__ttl a{
  color: #596e79;
  margin-bottom: 4rem;
  font-size: 2.2rem;
  transition: .3s;
}

.access-container__ttl a:hover {
  color: #c7b198;
  transition: .3s;
}

.access-container__txt{
  margin-top: 3rem;
}

.access-container__tel a, .access-container__tel p{
  font-size: 1.8rem;
  margin: 0;
}

.access-container__sns {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.access-container__sns a {
  margin-left: .8rem;
  transition: .3s;
}

.access-container__sns a:hover {
  opacity: .6;
  transition: .3s;
}

/* ************************************************************************************************
   index.php
   ************************************************************************************************ */

.index__ttl {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   align-items: center;
}

.index__ttl img {
   margin-right: 3rem;
}


/***** Information *****/
.info {
   padding: 10rem 0 15rem;
}

.info__box{
   border: 3px dashed #596e79;
   padding: 5rem 7rem;
   border-radius: 40px;
}

.info-list th {
   color: #596e79;
   padding-right: 4rem;
}

.info-list a {
   transition: .3s;
}

.info-list a:hover {
   transition: .3s;
}


/***** Gallery *****/
.gallery {
   padding: 0 0 5rem;
}

.gallery img {
   filter: sepia(.5);
   margin: 0 1.5rem;
}

/* ************************************************************************************************
  beginner.php
  ************************************************************************************************ */
.course__container {
   padding: 15rem 0;
}

.course__heading {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   width: 400px;
   margin: 0 auto;
   justify-content: space-around;
   align-items: center;
   text-align: center;
}

.course__ttl h2 {
   color: #596e79;
}

.course__ttl h3 {
   color: #c7b198;
   font-family: 'Kalam','komorebi-gothic', sans-serif;
   font-weight: normal;
}

.course__line {
   display: block;
   margin: .5rem auto 0;
}

.course__txt {
   margin: 10rem auto;
   text-align: center;
}

.course-price {
   text-align: center;
   margin-bottom: 10rem;
}

.course-price__tbl {
   margin: 3rem auto 2rem;
   text-align: left;
}

.course-price__tbl th, .course-price__tbl td {
   font-size: 2.5rem;
   padding: .5rem 0;
}

.course-price__tbl th {
   color: #596e79;
   padding-right: 6rem;
}

.course-price__tbl th img {
   margin-right: 1rem;
}

.course-links {
   text-align: center;
}

.course-links a {
   margin: 0 3rem;
}

.course-voice {
   padding: 20rem 0 5rem;
}

.course-voice__heading {
   text-align: center;
   margin-bottom: 8rem;
}

.course-voice__heading h3 {
   color: #596e79;
   padding-top: 1.5rem;
}

.course-voice__item {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 80%;
   margin: 0 auto 7rem;
}

.course-voice__item img {
   margin-right: 7rem;
}

/*Edge調整*/
@supports (-ms-ime-align: auto) {
  .course-voice__item img {max-width: inherit;}
}

.course-voice__name {
   font-size: 1.4rem;
   text-align: right;
   margin-top: 1rem;
}

/* 吹き出し */
.course-voice__txt {
   position: relative;
   display: inline-block;
   padding: 2rem 3rem;
   min-width: 120px;
   max-width: 100%;
   font-size: 16px;
   background: #d4e4f2;
   border: solid 3px #dfd3c3;
   box-sizing: border-box;
   border-radius: 40px;
   width: 80%;
}

.course-voice__txt:before {
   content: "";
   position: absolute;
   top: 50%;
   left: -24px;
   margin-top: -12px;
   border: 12px solid transparent;
   border-right: 12px solid #d4e4f2;
   z-index: 2;
}

.course-voice__txt:after {
   content: "";
   position: absolute;
   top: 50%;
   left: -30px;
   margin-top: -14px;
   border: 14px solid transparent;
   border-right: 14px solid #dfd3c3;
   z-index: 1;
}

.course-voice__txt p {
   margin: 0;
   padding: 0;
}

.course-voice__txt--pink {
   background: #f0e3f2;
}

.course-voice__txt--pink:before {
   border-right: 12px solid #f0e3f2;
}

/* ************************************************************************************************
  about.php
  ************************************************************************************************ */
.about {
   padding: 0 0 5rem;
}

.about__img{
   text-align: center;
   margin-bottom: 7rem;
}

.about__img img {
   width: 70%;
}

.about__tbl {
   margin: 0 auto;
}

.about__tbl tr {
   border-bottom: 2px dashed #c7b198;
}

.about__tbl th, .about__tbl td {
   padding: 1rem;
}

.about__tbl th {
   width: 20%;
   text-align: center;
}

/* ************************************************************************************************
   index.php(WP)
   ************************************************************************************************ */
.news__container {
  padding: 15rem 0;
}

.news__heading {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 400px;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.news__ttl h2 {
  color: #596e79;
}

.news__ttl h3 {
  color: #c7b198;
  font-family: 'Kalam','komorebi-gothic', sans-serif;
  font-weight: normal;
}

.news__line {
  display: block;
  margin: .5rem auto 0;
}

.news__post {
  width: 70%;
  margin: 0 auto;
}

.blog__info {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
}

.cal {
  color: #596e79;
  font-size: 1.4rem;
}

.cat a {
  font-size: 1.4rem;
  border: 2px solid #c7b198;
  padding: .5rem;
  background-color: #c7b198;
  color: #fff;
  font-weight: 400;
  transition: .3s;
}

.cat a:hover {
  background: transparent;
  color: #c7b198;
  transition: .3s;
}

.post {
  border-bottom: 2px dashed #596e79;
  padding: 2rem 1rem;
}

h2.title {
  line-height: 1.5;
}

.nav-below {
  text-align: center;
  margin: 6rem 0 5rem;
}

.nav-below a {
  color: #596e79;
  border: 2px dashed #596e79;
  padding: 1rem 2rem;
  transition: .3s;
  margin: 0 3rem;
}

.nav-below a:hover {
  color: #fff;
  background: #596e79;
  transition: .3s;
}


/* ************************************************************************************************
   single.php(WP)
   ************************************************************************************************ */
.single__ttl h2 {
  text-align: center;
  color: #596e79;
  font-size: 2.8rem;
  line-height: 1.8;
}

.single__thumbnail {
  text-align: center;
  margin-bottom: 4rem;
}

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

.single__txt {
  margin-top: 2rem;
}


/* ************************************************************************************************
   page-contact.php(WP)
   ************************************************************************************************ */
.contact__container {
   width: 60%;
   margin: 0 auto;
}

.contact__txt {
  text-align: center;
  margin-bottom: 6rem;
}

input, textarea {
  background: rgba(255,255,255, .7);
  width: 100%;
  margin-top: .5rem;
  margin-bottom: 3rem;
}

.wpcf7-list-item input {
    width: auto;
    margin: 0 .7rem .3rem 0;
}

.wpcf7-submit {
  width: 120px;
  height: 45px;
  text-align: center;
  display: block;
  margin: 4rem auto 0;
  background: #596e79;
  color: #fff;
  border: #596e79 1px solid;
  transition: .3s;
}

.wpcf7-submit:hover {
  background: rgba(255,255,255,.8);
  color: #457EAC;
  transition: .3s;
}

/*プライバシーポリシー*/
@media only screen and (max-width: 550px) {
	[class*="grid-"].noGutter > .col {
		padding: 0%;
	}
}

.blk-iframe {
  background-color: rgba(255,255,255,.5);
  width: 700px;
  max-width: 100%;
  height: 500px;
  margin: 5rem auto;
  overflow: auto;
  border: 1px solid #596e79;
	/*  -webkit-overflow-scrolling: touch;*/
}

.privacy {
	line-height: 1.8;
	padding: 5%;
  border-right: 1px solid #596e79;
}

.privacy p {
  font-size: 1.4rem;
}

.privacy h4 {
	text-align: center;
	border-bottom-style: none;
	margin-top: 0;
	padding: 0;
}

.privacy h4::after {
	content: none;
}

.privacy h5 {
	margin: 1em 0 0.5em;
  font-size: 1.6rem;
}

.contact__consent{
	text-align: center;
}


/* ************************************************************************************************
   PC
   ************************************************************************************************ */
@media screen and (max-width: 1440px){
  h3.current__copy {font-size: 120%;}
}

@media screen and (max-width: 1366px){
  .description h2 {font-size: 220%;}
  h3.current__copy {font-size: 107%; margin: 3rem 0 3rem;}
  .description {width: 43%; padding: 2em 2em 0;}
  .slider__course .description {width: 50%;}
  .index__ttl img {width: 28%;}
}

@media screen and (max-width: 1259px){
  .wrap {width: 100%; padding: 0 6rem;}
}


/* ************************************************************************************************
   1025px
   ************************************************************************************************ */
@media screen and (max-width: 1025px){
  /* index.php @1025px */
  .description, .slider__course .description {width: 100%;}
  .index__ttl img {width: 15%;}
  .description {padding: 2em 3em 0;}
  .info {padding: 15rem 0 15rem;}

  /* beginner.php @1025px */
  #course__slider {width:100%;}
  .course__container {padding: 10rem 0;}
  .course__txt {margin: 4rem auto 10rem;}
  .course-voice__item {width: 90%;}

  /* index.php(WP) @1025px */
  .news__container {padding: 10rem 0;}
  .news__post {width: 80%;}

}


/* ************************************************************************************************
   960px
   ************************************************************************************************ */
@media screen and (max-width: 959px){
  /* common @960px */
  .wrap {padding: 0 5rem;}
  .access-container {display: block;}
  .access-container__tel {text-align: right;}
  .br_pc {display: none;}

  /* index.php @960px */
  .description {padding: 4em;}
  .info {padding: 5rem 0 10rem;}
  .info__box {padding: 4rem;}

  /* beginner.php @960px */
  #course__slider {height: 500px;}
  .course__txt {margin: 3rem auto 7rem;}
  .course-price__tbl th, .course-price__tbl td {font-size: 2.2rem;}
  .course-price {margin-bottom: 7rem;}
  .course__txt {text-align: left;}
  .course-voice {padding: 15rem 0 0rem;}
  .course-voice__heading {margin-bottom: 7rem;}
  .course-voice__item {margin: 0 auto 5rem;}
  .course-voice__item img {margin-right: 5rem;}

  /* about.php @960px */
  .about__img img {width: 90%;}

  /* index.php(WP) @960px */
  .news__post {width: 90%;}

  /***** contact @960px *****/
  .contact__container {width: 80%;}

}


/* ************************************************************************************************
   560px
   ************************************************************************************************ */
@media screen and (max-width: 559px){
  /* common @560px */
  h1 {font-size: 3rem;}
  h2 {font-size: 2.8rem;}
  h3 {font-size: 2rem;}
  h4 {font-size: 1.8rem;}

  p {font-size: 1.4rem;}
  a {font-size: 1.4rem;}
  li, th, td {font-size: 1.4rem;}

  .wrap {padding: 0 3rem;}
  html:before {height: 7px;}
  html:after {width: 7px;}
  body:before {height: 7px;}
  body:after {width: 7px;}
  .loading__logo {width: 35%;}
  #page_top img {width: 50px;}

  footer {padding-bottom: 3rem;}
  .access-container__ttl a {margin-bottom: 3rem; font-size: 2rem;}
  .access-map iframe {height: 50vh;}
  .access-container__contact {margin-top: 3rem;}

  .index-ttl {text-align: center; margin-bottom: 3rem;}

  .btn02 {font-size: 1.4rem;}

  /* index.php @560px */
  .index__ttl img {margin-right: 2rem;}
  .slideshow p {font-size: 1.4rem; }
  h3.current__copy {font-size: 125%; margin: 2rem 0 2rem; text-shadow: 0 0 5px #fff;}
  .description {padding: 2em 1.5em 0;}
  .slider__course .description {padding: 5em 3em 0;}
  .slides {height: 85vh;}
  .description h2 {font-size: 220%;}
  .index__ttl img {width: 20%;}
  .info {padding: 0 0 10rem;}
  .info-list th {padding-right: 0;}
  .info-list td {padding-bottom: 2rem;}
  .info-list th, .info-list td{
    width: 100%;
    display: block;
  }
  .info__box {padding: 4rem 1.5rem;}
  .gallery {padding: 0;}
  .gallery img {margin: 0 .5rem;}

  /* beginner.php @560px */
  .course__heading {width: 100%;}
  .course__heading img {width: 13%;}
  .course__container {padding: 7rem 0;}
  #course__slider {height: 210px;}
  .course__txt {margin: 5rem auto;}
  .course-price__tbl {margin: 2rem auto 1rem;}
  .course-price__tbl th, .course-price__tbl td {font-size: 1.8rem;}
  .course-price__tbl th {padding-right: 4rem;}
  .course-price__tbl th img {width: 30%;}
  .course-links a {margin: 0px 1rem;}
  a.btn02-border {padding: 1.3rem 2.5rem 1rem;}
  .course-voice {padding: 10rem 0 0rem;}
  .course-voice__heading {margin-bottom: 5rem;}
  .course-voice__item {width: 100%; display: block;}
  .course-voice__item img {
    margin-right: 0;
    display: block;
    margin: 0 auto 3rem;
  }

  .course-voice__txt:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid #d4e4f2;
    margin-top: 3px;
  }

  .course-voice__txt:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
    border: 14px solid transparent;
    border-bottom: 14px solid #dfd3c3;
    z-index: 1;
}

  .course-voice__txt p {
    margin: 0;
    padding: 0;
  }
  .course-voice__txt {padding: 2rem; width: 100%;}

  .course-voice__txt--pink:before {
    border-bottom: 15px solid #f0e3f2;
  }

  /* about.php @560px */
  .about__tbl th {width: 25%;}
  .about__img {margin-bottom: 4rem;}

  /* index.php(WP) @560px */
  .news__post {width: 100%;}
  .news__heading {width: 100%;}
  .news__heading img {width: 13%;}
  .news__container {padding: 7rem 0;}

  /* single.php(WP) @560px */
  .single__ttl h2 {font-size: 2.4rem;}
  .single .nav-below,
  .category .nav-below {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
  }
  .single .nav-below a,
  .category .nav-below a {
    margin: 0;
    padding: 1rem;
  }

  /***** contact @560px *****/
  .contact__container {width: 100%;}
  .blk-iframe {margin: 4rem auto;}
  .wpcf7-list-item input {margin: 0 .5rem .3rem 0;}

}


/* ************************************************************************************************
   350px
   ************************************************************************************************ */
@media screen and (max-width: 350px){

  /* common @350px */
  h1 {font-size: 2.9rem;}
  h2 {font-size: 2.7rem;}
  h3 {font-size: 1.9rem;}
  h4 {font-size: 1.7rem;}

  p {font-size: 1.3rem;}
  a {font-size: 1.3rem;}
  li, th, td {font-size: 1.3rem;}

  .gnav__item a {font-size: 1.3rem; line-height: 4.5rem;}
  .site__ttl h1 a {font-size: 2.5rem;}

  .btn01 {max-width: 250px; font-size: 1.4rem;}
  .btn03 {font-size: 1.3rem;}
  a.btn02-border {padding: 1.3rem 1.8rem 1rem;}

  /***** index.php @320px *****/
  .slideshow p {font-size: 1.3rem;}

  /***** beginner.php @320px *****/
  #course__slider {height: 175px;}
  .course-price__tbl th, .course-price__tbl td {font-size: 1.6rem;}

}