@charset "UTF-8";

/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body {max-width: 640px; min-width: 320px; padding-top: 70px!important; max-height: 100%; min-height: calc(100vh - 70px);}

/*sp限定*/
.pc {display: none!important;}

/*コンティナ*/
.container {padding: 0 16px;}

/*汎用ヘッダー*/
.h-g {margin: 0 auto 40px; padding-top: 45px;}
.h-g span.big {font-size: 1.75rem;}
.h-g span.sml {margin-top: 10px;}

/*more*/
.more {font-size: .95rem;}

/*ギザギザ*/
.gagg::before,
.gagg::after {height: 32px;}
.gagg::before {top: -6px; background: linear-gradient(135deg, #fff 16px, transparent 0), linear-gradient(225deg, #fff 16px, transparent 0); background-size: 32px 32px;}
.gagg::after {bottom: -6px; background: linear-gradient(45deg, #fff 16px, transparent 0), linear-gradient(315deg, #fff 16px, transparent 0); background-size: 32px 32px;}

#about .dev-case + .gagg::before {background-image: linear-gradient(135deg, #f9faf0 16px, transparent 0), linear-gradient(225deg, #f9faf0 16px, transparent 0);}

/*戻るボタン*/
.back_button {font-size: 1.1rem; width: 200px; margin: 20px auto 30px; padding: 15px 20px;}

/*ページャー*/
#pagination {margin: 20px 0 40px;}
#pagination span,
#pagination a {width: 17px; height: 17px; font-size: 1.2em; margin: 0 2px; padding: 12px;}

/*--------------------------------------------------------------------------
ローディング
--------------------------------------------------------------------------*/
#loader img {width: 150px;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {height: 70px; box-shadow: 3px 3px 3px 0 rgba(0,0,0, .2);}

header .flex {flex-wrap: wrap; position: relative; padding: 0!important;}
header .logo {width: 100px; margin: 14px auto 10px;}
header .desc {width: 100%; font-size: 10px; text-align: center; line-height: 1;}
header .g-nav {display: none; position: fixed; top: 70px; left: 0; width: 100%; z-index: 1002;}
header .g-nav > ul {display: block; background: #fff;}
header .g-nav > ul > li {position: relative; line-height: 1.25; overflow: hidden; transition: .3s ease;}
header .g-nav > ul > li .main-nav {display: block; text-align: center; padding: 10px 0; border-top: 1px solid #ccc;}
header .g-nav > ul > li .main-nav span {display: block; font-size: 1.05rem; font-weight: 700;}
header .g-nav > ul > li .main-nav span.sml {font-size: .5rem; font-weight: 500;}
header .g-nav > ul > li .sub-open {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; cursor: pointer;}
header .g-nav > ul > li .sub-open:before,
header .g-nav > ul > li .sub-open:after {content: ""; position: absolute; left: 0; top: 0; background: #ccc; transition: ease .5s;}
header .g-nav > ul > li .sub-open:before {top: 18px; left: 12px; width: 16px; height: 4px;}
header .g-nav > ul > li .sub-open:after {top: 12px; left: 18px; width: 4px; height: 16px;}
header .g-nav > ul > li .sub-open.open:before,
header .g-nav > ul > li .sub-open.open:after {transform: rotate(45deg);}
header .g-nav > ul > li .sub-nav {display: none; border-top: 1px solid #ccc; background: #eee;}
header .g-nav > ul > li .sub-nav li {padding: 10px 20px; border-top: 1px solid #fff;}
header .g-nav > ul > li .sub-nav li:first-child {border-top: none;}
header .g-nav > ul > li .sub-nav li a {display: block; font-size: .95em; white-space: nowrap;}

header #nav-toggle {position: absolute; display: block; top: -4px; right: -8px; width: 72px; height: 72px; z-index: 2001; padding: 0; transition: .5s cubic-bezier(0.68, -0.43, 0.265, 1.55);}
header #nav-toggle span {position: absolute; left: 20px; display: block; width: 28px; height: 4px; margin: 0 auto; background: #666; transition: ease .5s;}
header #nav-toggle span:nth-child(1) {top: 26px;}
header #nav-toggle span:nth-child(2) {top: 34px;}
header #nav-toggle span:nth-child(3) {top: 42px;}
header #nav-toggle:hover {cursor: pointer;}

.open header #nav-toggle span:nth-child(1) {width: 10px; transform: rotate(45deg); top: 28px; left: 22px;}
.open header #nav-toggle span:nth-child(2) {transform: rotate(-45deg); top: 34px;}
.open header #nav-toggle span:nth-child(3) {width: 10px; transform: rotate(45deg); top: 40px; left: 36px;}

header #overlay {position: fixed; top: 70px; left: 0; width: 100vw; height: calc(100vh - 70px); background: rgba(0,0,0, .5); visibility: hidden; transition: all .5s ease; opacity: 0; z-index: 999;}
.open header #overlay {opacity: 1; visibility: visible;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer .logo {margin: 20px auto;}
footer nav {display: none;}
footer .copyright {padding: 10px 0; font-size: .9rem;}

#scroll {bottom: 10px; right: 10px; width: 50px; height: 50px;}

/*------------------------------------
お気軽にお問合せください
------------------------------------*/
.contact-cta {padding: 52px 0 150px;}
.contact-cta .container {width: 100%; max-width: 400px; margin: 0 auto; padding: 0 10px; box-sizing: border-box;}
.contact-cta h2 {display: block; margin-bottom: 24px;}
.contact-cta h2 img {width: auto; height: 20.25px; margin: 5px auto;}
.contact-cta .contact-list {margin-bottom: 28px;}
.contact-cta .contact-list li {margin-bottom: 8px; padding: 8px 10px; border-width: 2px; border-radius: 8px;}
.contact-cta .contact-list li img {height: 29.25px;}
.contact-cta .touroku {width: calc(100% - 40px); margin: 0 20px; padding: 12px 0; font-size: .9rem;}
.contact-cta .random-img.i_01 {width: 136px; bottom:-175px; left:7px;}
.contact-cta .random-img.i_02 {width: 148px; bottom:-161px; right:1px;}

@media screen and (max-width: 359px) {
	.contact-cta h2 img {height: 19.25px;}
	.contact-cta .contact-list li img {height: 26.25px;}
}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
TOP
------------------------------------*/
#home .top #top-slider {width: 100%; height: 44.762vw;}
#home .top #top-slider li {height: 44.762vw;}
#home .top #top-slider li img.sub_img {width: 75%; left: 50%; transform: translate(-50%,-50%);}

/*------------------------------------
NEWS
------------------------------------*/
#home .news {padding: 40px 0;}
#home .news .h-g {margin: 0 auto 20px;}
#home .news .news-list {display: block;}
#home .news .news-list .entry a {display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #ccc; padding: 15px 0;}
#home .news .news-list .entry:last-child a {border-bottom: none;}
#home .news .news-list .entry a .img {min-width: 70px; max-width: 70px; height: 50px; margin-right: 10px;}
#home .news .news-list .entry a .txt {justify-content: flex-start; flex-wrap: wrap;}
#home .news .news-list .entry a time {font-size: .9em;}
#home .news .news-list .entry a .cat {font-size: .75rem;}
#home .news .news-list .entry a h3 {font-size: .9em; line-height: 1.25; text-align: left;}

/*------------------------------------
BISINESS
------------------------------------*/
#home .business {padding: 40px 0 0;}
#home .business .catch {font-size: 1.75em; margin-bottom: 24px;}
#home .business .desc {font-size: 1em; line-height: 1.625; margin-bottom: 42px;}

#home .business .biz-list > li {width: 100%; margin-bottom: 40px;}
#home .business .biz-list > li h3 {margin-bottom: 16px;}
#home .business .biz-list > li h3 span {font-size: 1.5rem;}
#home .business .biz-list > li img.img {margin-bottom: 14px;}
#home .business .biz-list > li p {font-size: 1em;}
#home .business .biz-list > li a.link {width: 184px; font-size: 1.25em; margin: 16px auto 0;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
会社理念 (philosophy.php)
--------------------------------------------------------------------------*/

/*会社理念*/
#philosophy .philo {padding: 40px 0;}
#philosophy .philo h3 {font-size: 1.5em; line-height: 1.5; margin: 90px auto 110px;}
#philosophy .philo p {font-size: .9em;}

#philosophy .philo .random-img.i_01 {top:143px; left:20px; width: 43px;}
#philosophy .philo .random-img.i_02 {top:156px; right:18px; width: 57px;}
#philosophy .philo .random-img.i_03 {bottom:238px; left:34px; width: 45px;}
#philosophy .philo .random-img.i_04 {bottom:220px; left:55%; transform: translate(-50%,0); width: 43px;}
#philosophy .philo .random-img.i_05 {bottom:228px; right:18px; width: 39px;}

#philosophy .philo.touroku {padding: 40px 0 110px;}
#philosophy .philo.touroku .random-img.i_01 {top:143px; left:20px; width: 43px;}
#philosophy .philo.touroku .random-img.i_02 {top:156px; right:18px; width: 57px;}
#philosophy .philo.touroku .random-img.i_03 {bottom:-60px; left:34px; width: 45px;}
#philosophy .philo.touroku .random-img.i_04 {bottom:-70px; left:55%; transform: translate(-50%,0); width: 43px;}
#philosophy .philo.touroku .random-img.i_05 {bottom:-64px; right:18px; width: 39px;}

/*ビジョン*/
#philosophy .vision {text-align: center; padding: 60px 0 50px;}
#philosophy .vision .vision-list {display: inline-block; margin: 20px auto 40px;}
#philosophy .vision .vision-list li {font-size: 1.125em; text-align: left; margin: 10px 0;}
#philosophy .vision .kyusyu {width: 259px; margin: 0 auto;}
#philosophy .vision .random-img {display: none;}

/*会社理念*/
#philosophy .outline {padding: 40px 0;}
#philosophy .outline table {width: 100%; font-size: .9rem;}
#philosophy .outline table tr {display: block;}
#philosophy .outline table tr th,
#philosophy .outline table tr td {display: block; margin: 0; padding: 6px 12px; text-align: left;}
#philosophy .outline table tr th {background: #c9c9c9; color: #fff;}

/*--------------------------------------------------------------------------
事業概要
--------------------------------------------------------------------------*/
#about .g-h {font-size: 1.75em; margin: 40px 0 24px;}
#about .desc {font-size: 1.1em; margin-bottom: 38px;}

#about .cut-img {height: 215px;}

#about .dev-case {padding: 1px 0 28px;}
#about .dev-case .case-list li {width: calc((100% - 12px) / 2); margin: 0 12px 18px 0;}
#about .dev-case .case-list li:nth-child(even) {margin-right: 0;}
#about .dev-case .case-list li img {height: 135px; margin-bottom: 8px;}
#about .dev-case .case-list li dl dt {font-size: .85em;}
#about .dev-case .case-list li dl dd {font-size: .9em;}

/*------------------------------------
観光促進 (tourism.php)
------------------------------------*/
#about.tourism .about .member {}
#about.tourism .about .member h3 {font-size: 1.3125em; margin-bottom: 10px;}
#about.tourism .about .member .member-list {margin-bottom: 65px;}
#about.tourism .about .member .member-list:after {content: ""; position: absolute; bottom: -52px; left: calc(50% - 18.5px); display: block; width: 37px; height: 38px; background: url(../img/tourism/tourism_about_arrow_01.svg) 0 0/100% auto;}
#about.tourism .about .member .member-list > li {margin-bottom: 15px; padding: 20px 0;}
#about.tourism .about .member .member-list > li h4 {font-size: 1.2em; margin-bottom: 16px;}
#about.tourism .about .member .member-list > li ol li {font-size: .95em; margin: 0 15px;}
#about.tourism .about .development {font-size: 1.25em; margin-bottom: 79px; padding: 12px 0;}
#about.tourism .about .development:after {width: 103.5px; height: 39px; bottom: -59px; left: calc(50% - 51.75px);}
#about.tourism .about .example {padding: 18px; border-radius: 8px;}
#about.tourism .about .example .info {margin-top: 12px;}
#about.tourism .about .example .info h3 {font-size: 1.325em;}
#about.tourism .about .example .info .open {font-size: 1.025em;}
#about.tourism .about .outlook {margin: 40px 0 150px;}
#about.tourism .about .outlook .outlook-list li {font-size: 1.25em; text-indent: -2em; padding-left: 2em;}
#about.tourism .about .outlook .outlook-list li .marker:after {height: 4px;}
#about.tourism .about .outlook .outlook-list .charge {bottom: calc(-100px); left: 0; font-size: .975em; padding: 6px 12px;}
#about.tourism .about .outlook .outlook-list .charge:before {top: -10px; left: 84px; border-width: 0 12px 10px 12px;}

#about.tourism .reqreate {padding: 58px 0 48px;}
#about.tourism .reqreate .logo {margin-bottom: 32px;}
#about.tourism .reqreate .g-h {font-size: 1.45em;}
#about.tourism .reqreate .desc {font-size: 1.075em; margin-bottom: 36x;}
#about.tourism .reqreate .link {font-size: 1.125em; padding: 5px 0;}

#about.tourism .scheme {margin-bottom: 40px;}
#about.tourism .scheme .g-h {margin: 54px 0 46px;}
#about.tourism .scheme .desc {font-size: 1.075em;}

@media screen and (max-width: 359px) {
	#about.tourism .about .outlook .outlook-list li {font-size: 1.175em;}
}

/*------------------------------------
感動本舗 (trading.php)
------------------------------------*/
#about.trading .mall h2 {font-size: 1.375em; margin: 32px 0 24px;}
#about.trading .mall p {font-size: 1.05em; margin-bottom: 42px;}

#about.trading .chart {padding: 50px 20px;}

#about.trading .mall-list {margin: 50px 0 60px;}
#about.trading .mall-list li:not(:last-child) {margin-bottom: 24px;}

/*------------------------------------
ペット事業 (pet.php)
------------------------------------*/
#about.pet .about .logo {width: 300px;}

#about.pet .shop {margin: 50px 0 65px;}
#about.pet .shop h2 {font-size: 1.375em; margin-bottom: 16px;}
#about.pet .shop p {font-size: 1em; margin-bottom: 36px;}

#about.pet .shop .shop-list li:not(:last-child) {margin-bottom: 36px;}
#about.pet .shop .shop-list li .logo {height: auto;}
#about.pet .shop .shop-list li .logo.amazon {width: 170px;}
#about.pet .shop .shop-list li .logo.rakuten {width: 166px;}
#about.pet .shop .shop-list li .logo.yahoo {width: 163px;}
#about.pet .shop .shop-list li .link {width: 180px; font-size: .9125em; margin: 18px auto 0; padding: 5px 0;}

/*------------------------------------
システム (system.php)
------------------------------------*/
#about.system .service h2 {font-size: 1.85em; margin: 42px 0;}

#about.system .service .service-list li {margin-bottom: 42px;}
#about.system .service .service-list li .img {max-width: 100%; margin: 0 auto 18px;}
#about.system .service .service-list li h3 {margin-bottom: 16px;}
#about.system .service .service-list li h3 .num {width: 64px; height: 64px; font-size: 1.45em; margin-right: 15px;}
#about.system .service .service-list li h3 .title {font-size: 1.325em;}
#about.system .service .service-list li p {font-size: 1em;}

/*--------------------------------------------------------------------------
最新情報 (news.php)
--------------------------------------------------------------------------*/
#news {padding: 20px 0;}

/*--------------------------------------------------------------------------
採用情報 (recruit.php)
--------------------------------------------------------------------------*/
#recruit {padding: 20px 0;}
#recruit #single {margin: 0 10px 40px;}
#recruit #single h2 {margin: 0 -10px 20px;}
#recruit #single table {margin-bottom: 20px; border: 1px solid #c9c9c9;}
#recruit #single table tr,
#recruit #single table tr th,
#recruit #single table tr td {display: block;}

/*--------------------------------------------------------------------------
会員登録 (touroku.php)
--------------------------------------------------------------------------*/
#touroku {padding: 40px 0 10px;}

/*--------------------------------------------------------------------------
お問い合わせ (contact.php)
--------------------------------------------------------------------------*/
#contact {margin-bottom: 20px;}
#contact .image {height: 180px; margin-bottom: 40px; background-size: 100% auto; border-bottom-width: 5px;}

/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#state h1 {font-size: 1.75rem; font-weight: 500; text-align: center; line-height: 1.25; margin: 40px auto 0; padding: 50px 0; background: url(../img/general_icon.svg) center top/auto auto no-repeat;}
#state .flex {justify-content: flex-start; align-items: center;}
#state i {margin-right: 8px;}
#state time {display: flex; align-items: center; font-size: .9rem; margin-right: 12px;}
#state .cat {display: inline-block; font-size: .75rem; color: #fff; line-height: 1; padding: 4px 6px; background: #ff901e;}

#single {font-size: .95rem; font-weight: 500; margin: 40px auto; padding: 0;}
#single h2 {font-size: 1.5em; line-height: 1.5; margin: 0 0 20px 0; padding: 0 7px 10px; border-bottom: 2px solid #00356e;}
#single h3 {position: relative; font-size: 1.35em; line-height: 1.5; margin: 0 0 20px 0; padding: 9px 20px 8px; background: #f3f3f3; border-radius: 5px;}
#single h3:before {content: ""; display: block; position: absolute; bottom: -12px; left: 25px; width: 0; height: 0; border-style: solid; border-width: 12px 15px 0 15px; border-color: #f3f3f3 transparent transparent transparent;}
#single h4 {font-size: 1.15em; line-height: 1.5; margin: 0 0 20px 0; padding-left: 10px; border-left: 5px solid #00356e;}
#single h5 {position: relative; font-size: 1.05em; line-height: 1.5; margin: 0 0 20px 0; padding-left: 1em;}
#single h5:before {content: ""; display: block; position: absolute; top: 8px; left: 0; width: .6em; height: .6em; background: #00356e;}
#single p {line-height: 2; margin: 0 0 20px 0;}
#single p:after {display: block; clear: both; content: "";}
#single img {max-width: 100%; height: auto; margin: 5px 10px 5px 0;}
#single a {color: #0075c2;}
#single a:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f14d"; position: relative; top:0; right: -5px;}
#single em {font-style: italic;}
#single strong {font-weight: 700;}
#single del {color: inherit;}
#single blockquote {position: relative; margin: 0 0 20px 0; padding: 0 20px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 20px 0;}
#single code {display: block; color: #fff; margin: 0 0 20px 0; padding: 20px; background: #364549;}

#single ul, #single ol {margin: 0 0 20px 0;}
#single ul li, #single ol li {margin-left: 1.5em; line-height: 2.5;}
#single ul {list-style-type: disc;}
#single ul li {list-style-type: inherit;}
#single ol {list-style-type: decimal;}
#single ol li {list-style-type: inherit;}
#single ul ul, #single ol ol, #single ul ol, #single ol ul {margin: 0 0 0 1.75em;}

#single .scroll-table {overflow: auto; white-space: nowrap; margin: 0 0 20px 0;}
#single table thead, #single table tr {border-bottom: 1px solid #c9c9c9;}
#single table tfoot {border-top: 1px solid #c9c9c9;}
#single table tr:last-child {border-bottom: none;}
#single table th, #single table td {padding: 10px; vertical-align: middle;}
#single table th {padding: 10px 15px; text-align: left; vertical-align: top;}
#single table tbody th {background: #f5f5f5; white-space: nowrap;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {background: #eee;}
#single table p {margin: 0;}

#single .aligncenter {display: block; margin: 0 auto 20px;}
#single .alignright {float: right;}
#single .alignleft {float: left;}

/*前後記事*/
#postlink {margin: 30px 0;}
#postlink a {width: 100%; display: flex; position: relative; border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 10px;}
#postlink a .arrow {display: flex; align-items: center; font-size: 1.5em; background: #000; padding: 0 8px; border-radius: 4px;}
#postlink a .arrow i {color: #fff;}
#postlink a h3 {font-size: .85em; padding: 10px;}
#postlink a .image {min-width: 80px; max-width: 80px; height: 60px; margin: 10px 0; border: 1px solid #e0e0e0; overflow: hidden;}
#postlink a .image img {width: 100%; height: 100%; transition: .5s ease; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#postlink a.prev .image {margin-left: auto;}
#postlink a.next .arrow {margin-right: 10px; border-radius: 4px 0 0 4px;}
#postlink a.prev .arrow {margin-left: 10px; border-radius: 0 4px 4px 0;}

.news-list {width: 100%; justify-content: flex-start; flex-wrap: wrap;}
.news-list .target {width: 100%; margin: 0 0 20px 0;}
.news-list .target .image {width: 100%; height: 200px; border: 1px solid #969696; overflow: hidden;}
.news-list .target .image img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
.news-list .target .text {padding: 10px 3px; transition: .3s ease;}
.news-list .target .text .flex {justify-content: flex-start; align-items: center; margin-bottom: 8px;}
.news-list .target .text i {margin-right: 8px;}
.news-list .target .text time {display: flex; align-items: center; font-size: .9rem; margin-right: 12px;}
.news-list .target .text .cat {display: inline-block; font-size: .85rem; color: #fff; line-height: 1; padding: 4px 6px; background: #ff901e;}
.news-list .target .text h3 {font-size: 1.1em;}

/*おすすめの記事*/
#more-posts {margin-bottom: 60px;}
#more-posts .news-list .target {width: calc((100% - 20px) / 2); margin: 0 16px 20px 0;}
#more-posts .news-list .target:nth-child(2n) {margin-right: 0;}
#more-posts .news-list .target .image {height: 120px!important;}
#more-posts .news-list .target .text time {font-size: .8rem; margin-right: 8px;}
#more-posts .news-list .target .text .cat {font-size: .65rem; padding: 4px;}
#more-posts .news-list .target .text h3 {font-size: .9em!important;}

/*--------------------------------------------------------------------------
フォーム汎用
--------------------------------------------------------------------------*/
#form {margin: 0 auto 40px;}
#form h3 {font-size: 1.2em;}
#form h3 small {display: block;}
#form p {font-size: .9rem;}

#form form {margin-top: -20px;}
#form form > dl > dt {font-size: 1rem; padding: 20px 0 6px;}

#form input[type="text"],
#form input[type="email"],
#form input[type="tel"],
#form textarea {font-size: .9rem; padding: 8px 12px;}

#form label.file {font-size: 1em; padding: 8px 20px;}

#form .cheak {margin: 0 auto 40px;}

#form .privacy {margin: 40px 0 30px;}

#form input[type="submit"] {font-size: 1.2em;}

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {height: calc(100vh - 64px);}
#notfound .container {width: 96vw; height: 80vw;}
#notfound h1 {font-size: 5em; margin-bottom: 6px;}
#notfound h1 span {margin-left: 12px;}
#notfound p {font-size: 1.1em;}
#notfound a {width: 240px; font-size: 1em; margin-top: 15px;}