@charset "UTF-8";

/*基本色
#3FB8E3 #42D1D4 #6DDFAC */

* {box-sizing: border-box;}

.preload {transition: 0 !important;}

html {font-size: 62.5%;} /* 全体の文字の大きさを10pxにする*/

body,h1,h2,h3,p,figure,dl,dt,dd,ul,li,figure{margin: 0;padding: 0;}

body {font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3", sans-serif;}

a {text-decoration: none;
  transition: 0.5s ease;}

a:hover {opacity: 0.5;}

img {width: 100%;
  vertical-align: bottom;}

h1 {font-weight: normal;
  /* font-size: 36px; */}

h2 {font-weight: normal;
  font-size: 24px;}

h3 {font-weight: normal;
  font-size: 20px;}

p {font-size: 16px;
  line-height: 1.7;}

ul {list-style-type: none;}




/*スクロール途中でヘッダーが表示＆非表示するためのCSS*/
#header{
/*fixedで上部固定*/
  position: fixed;
  height: 90px;
  width:100%;
  z-index: 999;/*最前面へ*/
/*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#3FB8E3;
  color:#000000;
  padding: 0 20px;}
  
/*　上に上がる動き　*/
#header.UpMove{animation: UpAnime 0.5s forwards;}

@keyframes UpAnime{
  from {
  opacity: 1;
  transform: translateY(0);
  }
  to {
  opacity: 0;
  transform: translateY(-100px);
  }}
  
/*　下に下がる動き　*/
#header.DownMove{animation: DownAnime 0.5s forwards;}

@keyframes DownAnime{
  from {
  opacity: 0;
  transform: translateY(-100px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }}


/* header */
.logobox{display: flex;}

/* .logobox div{width: 25%;} */

.logobox h1{font-size: 1.6rem;
  line-height: 1;
  margin:2rem 0 0 3rem;}

.logo01{font-size: 3.5rem;
  font-family: 'Cormorant Garamond', serif;}

.logo02{font-size: 1.5rem;
  margin-top: -1.2rem;}

/* メニュー */
nav ul{font-size: 1.7rem;
  display: flex;
  justify-content: center;}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #000;
  padding:10px;
  transition:all 0.3s;}
  
nav ul li.current a,
nav ul li a:hover,
nav ul li a:active{color:#fff;}

nav ul li i{font-size: 2.5rem;}/* snsボタン */

main {padding-top: 0px;}

section{padding:30px 0;}


/* キャッチコピー */
.catchcopy{position: absolute;
  top: 28rem;
  left: 25rem;
  font-size: 3.5rem;
  background-color: rgba(255, 255, 255,0.8);
  padding: 2.5rem;
  border-radius: 10px;}


/* タイトルと帯 */
.title{margin: 5rem 0 3rem;
  padding: 15px 0;
  background: #6DDFAC;}

.title h2{width: 1000px;
  margin: 0 auto;}

/* 各ボックス */
.box{width: 1000px;
  margin: 0 auto;}

section.box{padding: 0;}

/* 事業内容箇所 */
.contentBox01{display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;}

.contentBox02{display: flex;
  justify-content: space-between;
  padding: 0 13rem;}

.contentBox_small{width: 200px;
  height: 220px;
  border: 1px solid #000;
  text-align: center;}

.contentBox_small figcaption{font-size: 1.5rem;}
.contentBox_small img{width: 90%;}

/* hoverしたら黒いボックスが出る */
.hovermask {
	width:200px;
	height:220px;
	overflow:hidden;
	/* margin:10px 8px 10px 16px; */
	position:relative;}

.hovermask .caption {
	font-size:140%;
	color:#fff;
	padding-top:80px;
	padding-left:10px;}

.hovermask .mask {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:	rgba(0,0,0,0.7);
	transition:all 0.4s ease;
	transform:scale(0);}/* 大きさを０にして表示しない */

.hovermask:hover .mask {transform:scale(1);}/* 大きさを１にして表示する */


/* instagramの埋め込み */
.sns{
    border: 1px solid #000;
    height: 400px;
}


/*お問い合わせ*/
.contactbox {
  width: 1000px;
  margin: 0em auto 0;
  padding-bottom: 3em;}

::placeholder {font-size: 1em;}

input[type="text"]:focus {
  background: #d8dfeb;
  outline: 0;}

input[type="email"]:focus {
  background: #d8dfeb;
  outline: 0;}

textarea:focus {
  background: #d8dfeb;
  outline: 0;}

select:focus {
  background: #d8dfeb;
  outline: 0;}

.thanks {padding: 20px;}

hr {margin: 30px 50px;}

.contactbox ul{margin: 0;padding: 0;}

.privacyinfo dl {
  font-size: 1.6em;
  margin: 0px 50px;
  display: flex;
  flex-wrap: wrap;}

.privacyinfo dt,
.privacyinfo dd {padding: 10px;}

.privacyinfo dt {
  width: 20%;
  font-weight: normal;
  padding: 15px 10px;}

.privacyinfo dd {width: 80%;}

/*php用*/
.sentbottom {
  display: flex;
  width: 90%;
  margin: 0 auto;}

.button {
  margin: 20px 20px 40px;
  font-weight: bold;
  padding: 10px;
  font-size: 16px;
  border-style: none;
  width: 40%;
  transition: 0.5s ease;
  border: 1px solid #999;}

.button:hover {
  opacity: 0.5;
  background-color: #ffcb00;
  color: #fff;}

/* プライバシーポリシー */
.privacy {
  width: 85%;
  height: 300px;
  font-size: 1.6em;
  overflow: scroll;
  margin: 1rem auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 5px;}

.privacy h4 {
  font-size: 1em;
  border-bottom: 1px dotted #333;
  margin-bottom: 10px;
  padding-bottom: 5px;}

.privacy p {
  font-size: 0.9em;
  line-height: 1.8em;
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 10px;}

.privacy a {
  color: #000;
  transition: 0.5s ease;}

.privacy a:hover {
  opacity: 0.5;
  color: #ffcb00;}

/*thanksページ*/
.thanks {
  font-size: 1.2em;
  line-height: 2em;}

/* フッター */
footer {
  background:#3FB8E3;
  width: 100%;
  color: #000000;
  font-size: 1em;
  padding: 5rem 0 1rem;}

footer small{
    display: block;
    text-align: center;
    padding:20px;
    font-size: 1.3rem;}

footer section{width: 100%;
  padding-top: 10px;}

footer h2{width: 45%;
  margin: 0 auto;}

.comContent_box{width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;}

.footer_comContent{
  width: 1000px;
  margin: 0 auto;}

.footer_comContent dl{width: 100%;
  font-size: 1.8rem;
  display: flex;
  flex-wrap: wrap;}

.footer_comContent dl a{color: #000;
  text-decoration: underline;}
.footer_comContent dl a:hover{color: #fff;}

.footer_comContent dt{width: 20%;
  padding: 0.5rem 0;}

.footer_comContent dd{width: 70%;
  padding: 0.5rem 0;}

.footer_comContent img{width: 100%;}








@media screen and (min-width: 481px) and (max-width: 1070px) {
/* .wrapper {overflow: hidden;} */

#header{
  /*fixedで上部固定*/
  position: fixed;
  height: 90px;
  width:100%;
  z-index: 999;/*最前面へ*/
/*以下はレイアウトのためのCSS*/
  display: flex;
  align-items: center;
  padding: 20px 10px 0; }

/* header */
.logobox{display: block;}

.logobox h1{font-size: 0.7rem;
  margin:0.5rem 0 0 0rem;}

.logo01{font-size: 1.8rem;
  font-weight: 1.5;
  margin-top: -2rem;
  font-family: 'Cormorant Garamond', serif;}

.logo02{font-size: 0.8rem;
  margin-top: -0.5rem;}

/* メニュー */
nav ul{font-size: 1.2rem;
  display: flex;
  justify-content: center;}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #000;
  padding:10px;
  transition:all 0.3s;}
  
nav ul li.current a,
nav ul li a:hover,
nav ul li a:active{color:#fff;}

nav ul li i{font-size: 3rem;}/* snsボタン */

main {padding-top: 0px;}

section{padding:30px 0;}

/* キャッチコピー */
.catchcopy{position: absolute;
  top: 15rem;
  left: 5rem;
  font-size: 2rem;
  background-color: rgba(255, 255, 255,0.8);
  padding: 2rem;
  border-radius: 10px;}


/* 各ボックス */
.box{width: 100%;
  margin: 0;}


/* タイトルと帯 */
.title{margin: 5rem 0 3rem;
  padding: 15px 0;
  background: #6DDFAC;}

.title h2{width: 100%;
  margin: 0;
  padding-left: 2rem;}


/* 事業内容箇所 */
.contentBox01{display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 3rem 1rem;}

.contentBox02{display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 3rem;}

.contentBox_small{width: 47%;
  height: 150px;
  border: 1px solid #000;
  /* padding: 10px; */
  text-align: center;
  padding: 1rem;
  margin-bottom: 3rem;}

.contentBox_small figcaption{font-size: 1.5rem;}
.contentBox_small img{width: 40%;}

/* hoverしたら黒いボックスが出る */
.hovermask {
	width:100%;}

.hovermask .caption {
	font-size:130%;
	color:#fff;
	padding-top:40px;
	padding-left:0px;}

.hovermask .mask {
	width:100%;
	height:90%;
	position:absolute;
	top:0;
	left:0;
	background-color:	rgba(0,0,0,0.7);
	transition:all 0.4s ease;
	transform:scale(0);}/* 大きさを０にして表示しない */

.hovermask:hover .mask {transform:scale(1);}/* 大きさを１にして表示する */

/* instagramの埋め込み */
.sns{
  border: 1px solid #999;
  height: 400px;
  margin: 0 2rem;
}


/* フッター */
footer {
  background:#3FB8E3;
  width: 100%;
  color: #000000;
  font-size: 1em;
  padding: 3rem 0 1rem;}

footer section{width: 100%;
  padding-top: 10px;}

footer h2{width: 45%;
  margin: 0 0 0 9rem;}

.comContent_box{width: 70%;
  /* margin: 0 auto; */
  display: flex;
  align-items: center;}

.footer_comContent{
  width: 100%;
  margin: 0 auto;}

.footer_comContent dl{width: 100%;
  font-size: 1.4rem;
  display: flex;
  flex-wrap: wrap;}

.footer_comContent dl a{color: #000;
  text-decoration: underline;}
.footer_comContent dl a:hover{color: #fff;}

.footer_comContent dt{width: 20%;
  padding: 0.5rem 0;}

.footer_comContent dd{width: 70%;
  padding: 0.5rem 0;}



/*お問い合わせ*/
.contactbox {
  width: 100%;
  margin: 0;
  padding-bottom: 3em;}


/* プライバシーポリシー */
.privacy {
  width: 85%;
  margin: 2em auto 3em ;}
}





@media screen and (max-width: 480px) {

  #header{
    /*fixedで上部固定*/
    position: fixed;
    height: 120px;
    width:100%;
    z-index: 999;/*最前面へ*/
  /*以下はレイアウトのためのCSS*/
    display: flex;
    align-items: center;
    padding: 10px 10px 0; }
  
  /* header */
  .logobox{display: block;}
  
  .logo01{font-size: 2.5rem;
    font-weight: 1.5;
    margin-top: -1rem;
    font-family: 'Cormorant Garamond', serif;}
  
  .logo02{font-size: 0.8rem;
    margin-top: -0.8rem;}
  
  .logobox h1{font-size: 0.5rem;
    margin:0.5rem 0 0 0;
    width: 150px;
    line-height: 1.2;}

  /* メニュー */
  nav{margin-left: 4rem;
    width: 80px;
    margin-top: -1rem;}

  nav ul{font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content:right;
    line-height: 2;}
  
  nav ul li a{
    display: block;
    text-decoration: none;
    color: #000;
    padding:0 0 0 8px;
    transition:all 0.3s;}
    
  nav ul li.current a,
  nav ul li a:hover,
  nav ul li a:active{color:#fff;}
  
  nav ul li i{font-size: 3rem;
    margin-top: 1.5rem;}/* snsボタン */
  
  main {padding-top: 0px;}
  
  section{padding:30px 0;}
  
  /* キャッチコピー */
  .catchcopy{position: absolute;
    top: 15rem;
    left: 6rem;
    font-size: 2rem;
    background-color: rgba(255, 255, 255,0.8);
    padding: 1rem;
    border-radius: 10px;}
  
  
  /* 各ボックス */
  .box{width: 100%;
    margin: 0;}
  
  
  /* タイトルと帯 */
  .title{margin: 2rem 0;
    padding: 5px 0;
    background: #6DDFAC;}
  
  .title h2{width: 100%;
    margin: 0;
    padding-left: 2rem;
    font-size: 1.5rem;}
  
  
  /* 事業内容箇所 */
  .contentBox01{display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 3rem 1rem;}
  
  .contentBox02{display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 3rem;}
  
  .contentBox_small{width: 47%;
    height: 170px;
    border: 1px solid #000;
    /* padding: 10px; */
    text-align: center;
    padding: 1rem;
    margin-bottom: 3rem;}
  
  .contentBox_small figcaption{font-size: 1rem;}
  .contentBox_small img{width: 90%;}
  
  /* hoverしたら黒いボックスが出る */
  .hovermask {
    width:100%;}
  
  .hovermask .caption {
    font-size:1rem;
    color:#fff;
    padding-top:40px;
    padding-left:0px;}
  
  .hovermask .mask {
    width:100%;
    height:150px;
    position:absolute;
    top:0;
    left:0;
    background-color:	rgba(0,0,0,0.7);
    transition:all 0.4s ease;
    transform:scale(0);}/* 大きさを０にして表示しない */
  
  .hovermask:hover .mask {transform:scale(1);}/* 大きさを１にして表示する */
  
  /* instagramの埋め込み */
  .sns{
    border: 1px solid #999;
    height: 400px;
    margin: 0 2rem;
  }
  
  hr {margin: 20px 10px;}


  /* フッター */
  footer {
    background:#3FB8E3;
    width: 100%;
    color: #000000;
    font-size: 1em;
    padding: 3rem 0 1rem;}
  
  footer section{width: 100%;
    padding-top: 10px;}
  
  footer h2{width: 100%;
    margin: 0 0 0 0rem;
    text-align: center;}
  
  .comContent_box{width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;}
  
  .footer_comContent{
    width: 100%;}
  
  .footer_comContent dl{width: 100%;
    font-size: 1.4rem;
    display: flex;
    flex-wrap: wrap;}
  
  .footer_comContent dl a{color: #000;
    text-decoration: underline;}
  .footer_comContent dl a:hover{color: #fff;}
  
  .footer_comContent dt{width: 20%;
    padding: 0.5rem 0;}
  
  .footer_comContent dd{width: 70%;
    padding: 0.5rem 0;}

  .footer_comContent figure img{width: 120%;
    margin: 0 auto;}
  


  /*お問い合わせ*/
  .contactbox {
    width: 100%;
    margin: 3em 0 0;
    padding-bottom: 3em;
    /* background-color: #e6e6e6; */}

  /* プライバシーポリシー */
  .privacy {
    width: 90%;
    height: 300px;
    overflow: scroll;
    margin: 1em auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;}

  .privacy h4 {
    font-size: 1em;
    border-bottom: 1px dotted #333;
    margin-bottom: 10px;
    padding-bottom: 5px;}

  .privacy p {
    font-size: 0.9em;
    line-height: 1.8em;
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 10px;}

  .privacy a {
    color: #000;
    transition: 0.5s ease;}

  .privacy a:hover {
    opacity: 0.5;
    color: #ffcb00;}

  .privacyinfo dl {
    font-size: 1.5em;
    margin: 0px 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;}
    
  .privacyinfo dt,
  .privacyinfo dd {padding: 10px;}

  .privacyinfo dt {
    width: 90%;
    font-weight: bold;
    padding: 5px 10px;}

  .privacyinfo dd {width: 100%;}

}