/*======================================

	0. WPネイティブ設定
	
=======================================*/

/* editor */
 
p {
    display: block;
    margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
 
/* img */
 
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
 
/* clearfix */
 
.clearfix {
    overflow: hidden;
    zoom: 1;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/*======================================

	1. フォント設定
	
=======================================*/

p,
pre,
cite,
blockquote {
font-size: 100%;
}

li,dt,dd {
font-size: 100%;
}

* {
font-style: normal;
}

strong {
font-weight:bold;
}


/*======================================

	2. サイト構造
	
=======================================*/

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0 auto;
padding: 0;
color: #754c24;
background-color: #fff2e5;
line-height: 1.6;
font-family: "Kiwi Maru","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
font-style: normal;
}

.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
}

br.clear {
clear: both;
font: 0pt/0pt sans-serif;
}

a {
color: #009de1;
text-decoration: none;
}

a:hover {
color: #009de1;
}

section {
clear: both;
}


/*======================================

	3. ヘッダ設定
	
=======================================*/


header {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}

.header-left {
margin: 20px 0 0 20px;
}

.header-right {
display: none;
}

h1 {
margin: 0;
padding: 0;
}

h1 img {
margin: 0;
padding: 0;
width: 270px;
height: auto;
vertical-align: top;
}

.header-oco {
width: 167px;
height: auto;
vertical-align: top;
}

.header-logomark {
width: 105px;
height: auto;
vertical-align: top;
}


/*======================================

	3. アニメーション共通
	
=======================================*/

.animate-fade-in {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-fade-in-down {
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-zoom-in {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animate-zoom-out {
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 1.04s ease, transform 1.04s ease;
}

.animated {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}


/*======================================

	4. TOP設定
	
=======================================*/

/* --- フロートボタン ---*/
.fixed-btn {
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
background-color: #45B688;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 23px;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.fixed-btn:hover {
background-color: #7dd3ae;
color: #FFF;
}


/* --- メイン画像 ---*/

.house {
margin: 20px 10px 0 10px;
padding: 0;
position: relative;
}

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

.house-text {
position: absolute;
top: 12%;
left: 10%;
font-size: 4vw;
font-weight: normal;
}

.house-img {
position: absolute;
bottom: 4%;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 20px);
}

.house-img video {
margin: 0 auto;
width: 100%;
height: auto;
display: block;
}


/* --- ペットと暮らす ---*/

.withpet {
margin: 50px 10px 0 10px;
display: flex;              /* フレックスボックスを使用 */
justify-content: center;    /* 横方向（縦書きの場合は縦のライン）に中央揃え */
align-items: center; 
flex-direction: column;
background-image: url("img/footprints.svg");
background-repeat: no-repeat;
background-position: right 15% top 20%;
background-size: 140px auto;
}

.withpet p {
writing-mode: vertical-rl;
font-size: 18px;
line-height: 2em;
}

.withpet img {
margin-top: -50px;
width: 90%;
height: auto;
}


/* --- CHALLENGED PERSON ---*/
.cp-box {
margin: 50px 10px 0 10px;
padding: 70px 0 0 0;
border: 1.5px solid #754c24;
border-top-right-radius: 500px;
border-top-left-radius: 500px;
background-image: url("img/footprints4.svg");
background-color: #FFF;
background-position: center top 25%;
background-repeat: no-repeat;
background-size: 90% auto;
text-align: center;
}

.cp-box img {
width: 90%;
height: auto;
}

.cp-box h2 {
text-align: center;
}

.cp-box h2 img {
width: 60%;
height: auto;
}

.cp-box h3 {
font-size: 20px;
}

.cp-box p {
margin: 40px 8% 10px 8%;
font-size: 16px;
}

.cp-box p br {
display: none;
}


/* --- Instagram ---*/

.instagram {
margin: 70px 10px 0 10px;
text-align: center;
}

.instagram img {
width: 220px;
height: auto;
}



/* --- MAP ---*/
.map h2 {
margin: 100px 0 0 0;
height: 200px;
text-align: center;
background-image: url("img/sun-photo.jpg");
background-size: cover;
background-position: center center;
color: #FFF;
font-size: 24px;
font-weight: normal;
display: flex;
align-items: center; /* 縦（上下）中央 */
justify-content: center;
}

.map p {
margin: 40px 0;
text-align: center;
font-size: 18px;
}

.map-box {
margin: 0 10px;
}

.kobari,
.matsumidai,
.sakai {
margin: 0 0 20px 0;
width: 100%;
}

.kobari h3 {
margin: 0;
padding: 20px 0;
background-color: #ff819d;
color: #FFF;
font-size: 23px;
font-weight: normal;
text-align: center;
}

.matsumidai h3 {
margin: 0;
padding: 20px 0;
background-color: #00924b;
color: #FFF;
font-size: 23px;
font-weight: normal;
text-align: center;
}

.sakai h3 {
margin: 0;
padding: 20px 0;
background-color: #ed2824;
color: #FFF;
font-size: 23px;
font-weight: normal;
text-align: center;
}

.map-box-inner {
padding: 25px 19px 25px 19px;
background-color: #FFF;
border-bottom: 1.5px solid #754c24;
border-left: 1.5px solid #754c24;
border-right: 1.5px solid #754c24;
}

.map-box-inner img {
width: 100%;
height: auto;
}

.map-box-inner p {
margin: 30px 0;
font-size: 16px;
}

.map-wrap {
margin-bottom: 50px;
position: relative;
width: 100%;
padding-top: 75%; /* 16:9（高さ ÷ 幅 × 100） */
}

.map-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.map-box-inner table {
border-collapse: collapse;
}

.map-box-inner table tr {
}

.map-box-inner table th {
padding: 10px 20px 10px 10px;
text-align: left;
vertical-align: top;
font-size: 15px;
font-weight: normal;
white-space: nowrap;
border-right: 1.5px solid #754c24;
}

.map-box-inner table td {
padding: 10px 10px 10px 20px;
text-align: left;
font-size: 15px;
vertical-align: bottom;
}


/* --- OCO ---*/

.oco {
margin: 70px 10px;
padding: 30px 0 10px 0;
border: 1.5px solid #754c24;
background-color: #FFF;
text-align: center;
}

.oco img {
width: 95%;
height: auto;
}

.oco h2 {
text-align: center;
}

.oco h2 img {
width: 274px;
height: auto;
}

.oco h3 {
margin: 30px 0 50px 0;
font-size: 22px;
font-weight: normal;
text-align: center;
}

.oco-box {
margin: 0 15px;
}

.oco-left {
text-align: left;
}

.oco-left p {
margin: 0 0 50px 0;
font-size: 16px;
line-height: 1.5em;
}

.oco-left a {
padding: 10px 50px;
display: inline-block;
color: #FFF;
background-color: #754c24;
border-radius: 50px;
font-size: 18px;
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.oco-left a:hover {
color: #FFF;
background-color: #936c4c;
border-radius: 50px;
}

.oco-right {
text-align: center;
}

.oco-right img {
width: 278px;
height: auto;
}

.oco-banner {
margin: 30px 0;
}

.oco-banner a img {
transition : all 0.5s ease 0s;
transition-timing-function: ease-out;
}

.oco-banner a img:hover {
opacity: 0.8;
}


/*======================================

	5. FOOTER設定
	
=======================================*/

footer {
margin: 0;
padding: 60px 0;
background-color: #754c24;
color: #FFF;
}

.footer-inner {
margin: 0 10px;
}

.footer-left {

}

.footer-left h2 {
font-size: 20px;
font-weight: normal;
}

.footer-left p {
font-size: 16px;
}

.footer-left p span.cont {
font-size: 14px;
}

.mail::before {
  content: "info";
}
.mail::after {
  content: "@gh.s-u-n.co.jp";
}

.footer-right {
margin: 30px 0 0 0;
text-align: center;
}

.footer-right img {
filter: brightness(0) saturate(100%) invert(90%) sepia(66%) saturate(2%) hue-rotate(244deg) brightness(109%) contrast(100%);
}

.footer-right p {
margin: 10px 0 50px 0;
font-size: 10px;
}


/*======================================

	5. CONTACT
	
=======================================*/

.contact {
margin: 50px 10px;
padding: 30px 15px 0 15px;
background-color: #FFF;
border: 1.5px solid #754c24;
font-size: 18px;
}

.contact h2 {
font-size: 30px;
font-weight: normal;
text-align: center;
}

.contact p {
margin: 50px 0 100px 0;
font-size: 18px;
}

.smf-progress-tracker {
font-size: 16px;
}


.snow-monkey-form input[type="text"],
.snow-monkey-form input[type="email"],
.snow-monkey-form input[type="tel"] {
margin: 0 3px 3px 0;
padding: 10px 10px;
border: 1px solid #cdcdcd;
font-size: 16px;
border-radius: 50px;
}

.snow-monkey-form textarea  {
padding: 10px 50px;
border: 1px solid #cdcdcd;
height: 150px;
width: 100%;
border-radius: 8px!important;
}

.snow-monkey-form select {
padding: 10px 50px;
border: 1px solid #cdcdcd;
border-radius: 50px!important;
}

.snow-monkey-form button[type="submit"],
.snow-monkey-form button[type="button"] {
margin: 0 10px;
text-align: center;
padding: 10px 50px;
border: 1px solid #0066df;
background-color: #0066df!important;
border-radius: 50px;
color: #FFF;
background-image: none!important;
}

.snow-monkey-form button[type="submit"]:hover ,
.snow-monkey-form button[type="button"]:hover {
background-color: #4694e0!important;
}

button.smf-button-control__control {
background-color: #754c24!important;
}



/*======================================

	5. wp-pagenavi設定
	
=======================================*/

/*---- wp-pagenavi ------*/

.wp-pagenavi {
margin: 0 auto 100px auto;
overflow: hidden;
text-align: center;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

/*---- wp-pagenavi ページ「〇/〇」 ------*/
.wp-pagenavi .pages {
display: none;
}

/*---- wp-pagenavi ≪ 先頭 ------*/
.wp-pagenavi .first {
display: none;
}

/*---- wp-pagenavi ≪ ------*/
.wp-pagenavi a.previouspostslink {
margin: 0 5px;
padding: 10px;
display: inline-block;
width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.previouspostslink:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 省略「...」 ------*/
.wp-pagenavi .extend {
border: none;
}

/*---- wp-pagenavi 各ページ（リンクあり） ------*/
.wp-pagenavi a.page {
margin: 0 5px;
padding: 10px;
display: inline-block;
min-width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.page:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 現在のページ ------*/
.wp-pagenavi .current {
margin: 0 5px;
padding: 10px;
display: inline-block;
min-width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 各ページ（現在のページより前のページ） ------*/
.wp-pagenavi .smaller {

}

/*---- wp-pagenavi 各ページ（現在のページより後のページ） ------*/
.wp-pagenavi .larger {

}

/*---- wp-pagenavi ≫ ------*/
.wp-pagenavi a.nextpostslink {
margin: 0 5px;
padding: 10px;
display: inline-block;
width: 40px;
height: 40px;
line-height: 100%;
vertical-align: middle;
font-size: 15px;
border: 1px solid #007BFF;
border-radius: 40px;
background-color: #FFF;
color: #007BFF;
transition : all 0.2s ease 0s;
transition-timing-function: ease-out;
}

.wp-pagenavi a.nextpostslink:hover {
text-decoration: none;
border-radius: 40px;
background-color: #007BFF;
color: #FFF;
}

/*---- wp-pagenavi 最後 ≫ ------*/
.wp-pagenavi .last {
display: none;
}