@charset "UTF-8";
/*-----------------------------
制作メモ
フォントサイズ
SP
大　1.375rem / 22px
中 1.125rem / 18px
標準　1rem / 16px
小 0.75rem / 12px

PC
大　1.875rem / 30px
中 1.375rem / 22px
標準　1rem / 16px
小 0.75rem / 12px

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.375rem
22px = 1.375rem
24px = 1.5rem
32px = 2rem

ブレイクポイント
@media (min-width: 768px) {
}

*600px〜タブレット
@media screen and (min-width:600px) and ( max-width:960px) {

*960px〜小型PC
@media screen and (min-width:1280px) {


色指定
#ded9c7
#1e1e18
#78a0c0
#4c647c
#4c8c0c
#a78f6a
#948485
#a4bc44
#f3f3f2

h1 - メインタイトル
h2 - sectionの中のタイトル
h3 - sectionの中の子タイトル
h4 - asideのタイトル


/*
Responsive Breakpoints
961+ => PC
960-641 => Tablet
639- => Phones
*/
/* ------------------------------------------------------------------------
Table Of Contents
0. Reset


1.0  Global
2.0 Base Styling
   2.1 layout
   2.2 Typography
   2.3 link
   2.4 img
   2.5 list
	 2.6 button



3. Single
4. Index
5. Archive
6. Page
7. 404 Page
8. Header
9. Footer
10. Sidebar
11. Comment
12. WP native
13. Misc
14. CJK Styling
15. Plugin
16. Print styling
----------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
     1. Global
------------------------------------------------------------------------- */
html { font-size: 100%;  /*16px=1rem;*/ }

body{
font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
margin:0;
font-size: 0.875rem;
color: #151515;
line-height:1.8;
letter-spacing:1.2px;
word-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
    2. Base Styling
------------------------------------------------------------------------- */

/*--------Base:common layout-------------*/
.container { display:block;width:95%;margin:0 auto;}

@media (min-width: 768px) {
.container { max-width:1200px;margin:0 auto;}

}

/*--------Base:Typography-------------*/
b, strong,em { font-weight: bold; }
big { font-size: larger; }

hr {
height: 0;
overflow: visible;
border: 1px solid #f0f0f0;
}

small { font-size: smaller; }
sub { vertical-align: sub;font-size: smaller;}
sup { vertical-align: super;font-size: smaller;}
ins { text-decoration: underline; }
address, cite, q, var { font-style: italic; }
abbr { position: relative;text-decoration: none;}

h1, h2, h3, h4, h5, h6 {
color: #111;
line-height: 1.4;
letter-spacing: -.03em;
}

h1 { font-size: 1.875em; }
h2 { font-size: 1.56em; }
h3 { font-size: 1.43em; }
h4 { font-size: 1.34em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1.12em; }

/*--------Base:link-------------*/
a {
color:#272727;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-decoration: none;
}

a:visited{
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

a:hover {
color:#00789b;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-decoration: none;
}

/*--------Base:img-------------*/
img {
outline:none;
border-style:none;
width:100%;
height:auto;
vertical-align: bottom;
}

a img {
transition: 1s;
-webkit-backface-visibility: hidden; /* 追加 */
 backface-visibility: hidden; /* 追加 */
}

a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;

}

/*--------Base:list-------------*/

/*--------2.6 button------------*/
/*<a class="btn" href="#">btn</a>*/
/*--base--*/
.btn {
  width: 100%;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  font-weight:bold;
}
.btn::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.btn,
.btn::before,
.btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
/*--outline--*/
.btn_outline a{
  display: block;
  background-color: #fff;
  border: 2px solid #4f371b;
  color: #4f371b;
  line-height: 50px;
}

.btn_outline a:hover {
  background-color: #4f371b;
  border-color: #4f371b;
  color: #fff;
}

/*--base--*/


/*-----------------------------
logo area
---------------------------*/
.concept__wrap {
  padding: 50px 0 0 0;
  background-image: url(../img/bg_img.jpg);
  background-size:cover;
}

.inn_wrap {
  width:95%;
  padding:200px 20px;
  margin:0 auto;
  background-color: #fff;
  display:block;
-webkit-box-shadow: 0px 6px 17px 1px rgba(201,201,201,0.79);
-moz-box-shadow: 0px 6px 17px 1px rgba(201,201,201,0.79);
box-shadow: 0px 6px 17px 1px rgba(201,201,201,0.79);
}

.logoA {
  display:block;
  margin-bottom:120px;
}

.logoA .logo {
  max-width:480px;
  margin:0 auto 10px;
}

.logoA .logo_ja {
  width:120px;
  margin:0 auto;
}

@media (max-width: 767px) {
.concept__wrap {
  padding: 20px;
}

.inn_wrap {
  width:98%;
  padding:100px 20px;
  margin:0 auto;
  background-color: #fff;
  display:block;
}


.logoA {
  display:block;
  margin-bottom:100px;
}

.logoA .logo {
  max-width:55%;
  margin:0 auto 10px;
}

.logoA .logo_ja {
  width:30%;
  margin:0 auto;
}
}

@media (max-width: 599px) {
.inn_wrap {
  padding:60px 20px;
}

.logoA {
  display:block;
  margin-bottom:80px;
}

.logoA .logo {
  max-width:55%;
  margin:0 auto 10px;
}

.logoA .logo_ja {
  width:30%;
  margin:0 auto;
}
}

/*-----------------------------
 title area
---------------------------*/
.titA {
  width:440px;
  margin:0 auto 100px;
  display:block;
}

.concept_txtA p {
  font-size:1.35rem;
  line-height:2.5rem;
  margin-bottom:60px;
  text-align:center;
  font-weight:bold;
  color:#503718;
}

@media (max-width: 599px) {
.titA {
  width: 80%;
  margin: 0 auto 50px;
  display: block;
}

.concept_txtA p {
  text-align:left;
  font-size:1rem;
}

.sp_none {
  display:none;
}

}

/*-----------------------------
 btnA
---------------------------*/
.btnA {
  max-width:780px;
  margin:160px auto 0;
  display:flex;
  justify-content: space-between;
  flex-direction: row;

}

.btnA .btn {
  width:48%;
}

@media (max-width: 599px) {
.btnA {
  width:100%;
  margin:100px auto 0;
  display:flex;
  justify-content: space-between;
  flex-direction: column;
}

.btnA .btn {
  width:100%;
  margin-bottom:10px;
}
}

footer p {
  padding:15px 0;
  text-align:center;
  font-size:0.75rem;
}