@charset "UTF-8";

/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
.staging {position: fixed; left: 10vh; top: 10vh; background: url(../img/common/yellow-back.png); font-size: 20px; font-weight: 700; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0, .25); border-radius: 10px; z-index: 1000;}

body {padding-top: 90px; min-height: calc(100vh - 90px);}

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

/*コンティナ*/
.container {width: 970px; margin: 0 auto;}

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

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

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

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

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

/*パンくず*/
#breadcrumbs {padding: 16px 0 0; border-top: 1px solid #ddd; overflow: scroll; white-space: nowrap;}
#breadcrumbs ul {display: flex;}
#breadcrumbs ul li {display: inline-block; font-size: .9em; margin-right: 1em;}
#breadcrumbs ul li a {display: inline-block;}
#breadcrumbs ul li i {font-size: 1em;}

/*ページャー*/
#pagination {margin: 30px 0 60px;}
#pagination span,
#pagination a {width: 18px; height: 18px; font-size: 1.2em; margin: 0 4px; padding: 12px;}

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

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {padding: 0;}
header .container {align-items: center; transition: .3s ease;}
header .logo {width: 126px;}
header .desc {margin: 0 0 0 30px;}
header .g-nav {display: block!important; height: auto!important; transition: 0s; margin-left: auto;}
header .g-nav > ul {display: flex; align-items: center; padding: 0; margin: 0;}
header .g-nav > ul > li {position: relative; margin-left: 35px;}
header .g-nav > ul > li .main-nav {display: block; position: relative; text-align: center; opacity: 1; cursor: pointer;}
header .g-nav > ul > li .main-nav:last-child {margin: 0;}
header .g-nav > ul > li .main-nav:after {content: ""; position: absolute; display: block; bottom: 0; left: 0; right: 0; width: 0; height: 3px; margin: auto; background: #333; transition: .3s ease;}
header .g-nav > ul > li:hover .main-nav:after {width: 100%;}
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-nav {display: block!important; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 10px 0; background: url(../img/common/yellow-back.png); border-radius: 0 0 10px 10px; box-shadow: 3px 3px 3px 0 rgba(0,0,0, .2); opacity: 0; visibility: hidden; pointer-events: none; border-radius: 0 0 10px 10px; transition: .5s ease;}
header .g-nav > ul > li .sub-nav li {padding: 5px 20px;}
header .g-nav > ul > li .sub-nav li a {display: block; white-space: nowrap;}
header .g-nav > ul > li:hover .sub-nav {opacity: 1; visibility: visible; pointer-events: auto;}

header.border {border-bottom: 1px solid #c9c9c9;}

header.conv_01 {box-shadow: none;}
header.conv_02 {box-shadow: 3px 3px 3px 0 rgba(0,0,0, .2);}
header.conv_01 .g-nav > ul > li .main-nav {padding: 26px 5px;}
header.conv_02 .g-nav > ul > li .main-nav {padding: 13px 5px;}

header #nav-toggle,
#overlay {display: none;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer .logo {margin: 30px auto;}
footer nav ul.flex {justify-content: center; padding: 20px 0;}
footer nav ul li {margin: 0 25px;}
footer .copyright {padding: 14px 0;}

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

/*------------------------------------
お気軽にお問合せください
------------------------------------*/
.contact-cta {padding: 84px 0 70px;}
.contact-cta .container {width: 100%; max-width: 1366px;}
.contact-cta h2 {margin-bottom: 48px;}
.contact-cta h2 img {height: 40.5px; margin: 0 10px;}
.contact-cta .contact-list {width: 666px; margin-bottom: 36px;}
.contact-cta .contact-list li {margin-bottom: 16px; padding: 12px 32px; border-width: 3px; border-radius: 18px;}
.contact-cta .contact-list li img {height: 56.5px;}
.contact-cta .touroku {width: 420px; margin: 0 auto; padding: 12px 0; font-size: 1.4rem;}
.contact-cta .random-img.i_01 {bottom:-138px; left:45px;}
.contact-cta .random-img.i_02 {bottom:-112px; right:30px;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
TOP
------------------------------------*/
#home .top #top-slider {width: 100%; max-width: 1365px; height: 44.689vw; max-height: 610px; margin: 0 auto;}
#home .top #top-slider:before,
#home .top #top-slider:after {content: ""; position: absolute; top: 0; width: calc((100vw - 1365px) / 2); height: 100%; background: rgba(255,255,255, .5); pointer-events: none; z-index: 2;}
#home .top #top-slider:before {left: calc((-100vw - -1365px) / 2);}
#home .top #top-slider:after {right: calc((-100vw - -1365px) / 2);}
#home .top #top-slider .slick-list {overflow: visible!important;}
#home .top #top-slider li {height: 44.689vw; max-height: 610px;}
#home .top #top-slider li img.sub_img {right: 160px; transform: translate(0,-50%);}

/*------------------------------------
NEWS
------------------------------------*/
#home .news {padding: 90px 0 75px;}
#home .news .news-list .entry {width: calc((100% - 72px) / 4); margin-right: 24px;}
#home .news .news-list .entry:last-child {margin-right: 0;}
#home .news .news-list .entry a .img {height: 165px; margin-bottom: 10px;}
#home .news .news-list .entry a .txt {flex-wrap: wrap; height: auto;}
#home .news .news-list .entry a .cat {font-size: .8rem;}
#home .news .news-list .entry a h3 {line-height: 1.5;}

/*------------------------------------
BISINESS
------------------------------------*/
#home .business {padding: 80px 0 0;}
#home .business .catch {font-size: 3em; margin-bottom: 36px;}
#home .business .desc {font-size: 1.075em; line-height: 1.75; margin-bottom: 72px;}

#home .business .biz-list > li {width: calc((100% - 28px) / 2); margin-bottom: 95px;}
#home .business .biz-list > li h3 {margin-bottom: 32px;}
#home .business .biz-list > li h3 span {font-size: 2rem;}
#home .business .biz-list > li img.img {margin-bottom: 18px;}
#home .business .biz-list > li p {font-size: 1.2em; min-height: 4.3875em;}
#home .business .biz-list > li a.link {width: 282px; font-size: 1.6em; margin: 24px auto 0;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#post {border-right: none; border-left: none;}

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

/*会社理念*/
#philosophy .philo {padding: 80px 0;}

#philosophy .philo h3 {font-size: 3em; line-height: 1.75; margin: 0 auto 48px;}
#philosophy .philo p {font-size: 1.05rem;}
#philosophy .philo p.big {font-size: 1.25rem; margin-bottom: 20px;}

#philosophy .philo .random-img.i_01 {top:73px; left:60px;}
#philosophy .philo .random-img.i_02 {top:101px; right:0px;}
#philosophy .philo .random-img.i_03 {bottom:32px; left:14px;}
#philosophy .philo .random-img.i_04 {bottom:-40px; right:100px;}
#philosophy .philo .random-img.i_05 {bottom:33px; right:-85px;}

#philosophy .philo.touroku  {padding: 80px 0 100px;}
#philosophy .philo.touroku .random-img.i_01 {top:83px; left:50px;}
#philosophy .philo.touroku .random-img.i_02 {top:81px; right:60px;}
#philosophy .philo.touroku .random-img.i_03 {bottom:-12px; left:14px;}
#philosophy .philo.touroku .random-img.i_04 {bottom:-85px; right:30px;}
#philosophy .philo.touroku .random-img.i_05 {bottom:63px; right:-25px;}

/*ビジョン*/
#philosophy .vision {padding: 120px 0 280px;}
#philosophy .vision .vision-list {margin-top: 140px;}
#philosophy .vision .vision-list li {font-size: 2em; margin: 12px 0;}
#philosophy .vision .kyusyu {position: absolute; top:100px; right: 0;}
#philosophy .vision .random-img {position: absolute;}
#philosophy .vision .random-img.i_01 {top:50px; right:120px;}
#philosophy .vision .random-img.i_02 {top:131px; right:-46px;}
#philosophy .vision .random-img.i_03 {bottom:-116px; left:41px;}

/*会社理念*/
#philosophy .outline {padding: 80px 0;}
#philosophy .outline table {width: 770px; height: auto; margin: 0 auto;}
#philosophy .outline table tr {border-bottom: 1px solid #c9c9c9;}
#philosophy .outline table tr:last-child {border-bottom: none;}
#philosophy .outline table tr th {width: 140px; padding: 10px 30px; text-align: left;}
#philosophy .outline table tr td {width: calc(100% - 200px); padding: 10px 0;}

/*--------------------------------------------------------------------------
事業概要
--------------------------------------------------------------------------*/
#about .g-h {font-size: 2.95em; margin: 80px 0 48px;}
#about .desc {font-size: 1.35em; margin-bottom: 76px;}

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

#about .dev-case {padding: 1px 0 90px;}
#about .dev-case .case-list li {width: calc((100% - 72px) / 4); margin: 0 24px 24px 0;}
#about .dev-case .case-list li:nth-child(4n) {margin-right: 0;}
#about .dev-case .case-list li img {height: 165px; margin-bottom: 12px;}
#about .dev-case .case-list li dl dt {font-size: .925em;}

/*------------------------------------
観光促進 (tourism.php)
------------------------------------*/
#about.tourism .about .member {}
#about.tourism .about .member h3 {font-size: 1.9em; margin-bottom: 22px;}
#about.tourism .about .member .member-list {display: flex; justify-content: space-between; margin-bottom: 120px;}
#about.tourism .about .member .member-list > li {width: calc((100% - 44px) / 3); min-height: 276px; padding: 50px 0 0;}
#about.tourism .about .member .member-list > li:after {content: ""; position: absolute; bottom: -96px; left: calc(50% - 37px); display: block; width: 74px; height: 76px; background: url(../img/tourism/tourism_about_arrow_01.svg) 0 0/100% auto;}
#about.tourism .about .member .member-list > li h4 {font-size: 1.5em; margin-bottom: 24px;}
#about.tourism .about .member .member-list > li ol li {font-size: 1.1em; margin: 0 20px;}
#about.tourism .about .development {font-size: 1.7em; margin-bottom: 145px; padding: 24px 0;}
#about.tourism .about .development:after {width: 207px; height: 78px; top: 120px; left: calc(50% - 103.5px);}
#about.tourism .about .example {padding: 36px; border-radius: 15px;}
#about.tourism .about .example .info {margin-top: 25px;}
#about.tourism .about .example .info h3 {font-size: 2.05em;}
#about.tourism .about .example .info .open {font-size: 1.25em;}
#about.tourism .about .outlook {margin: 80px 0 260px;}
#about.tourism .about .outlook .outlook-list li {font-size: 2.15em;}
#about.tourism .about .outlook .outlook-list li .marker:after {height: 6px;}
#about.tourism .about .outlook .outlook-list .charge {bottom: -135px; right: 185px; font-size: 1.275em; padding: 10px 20px;}
#about.tourism .about .outlook .outlook-list .charge:before {top: -20px; right: 140px; border-width: 0 22px 20px 22px;}

#about.tourism .reqreate {padding: 94px 0 80px;}
#about.tourism .reqreate .logo {margin-bottom: 42px;}
#about.tourism .reqreate .desc {font-size: 1.5em; margin-bottom: 58px;}
#about.tourism .reqreate .link {width: 688px; font-size: 1.725em; padding: 10px 0;}

#about.tourism .scheme {margin-bottom: 80px;}
#about.tourism .scheme .g-h {margin: 108px 0 92px;}
#about.tourism .scheme .desc {font-size: 1.5em;}

/*------------------------------------
感動本舗 (trading.php)
------------------------------------*/
#about.trading .mall h2 {font-size: 2.625em; line-height: 1.25; margin: 64px 0 48px;}
#about.trading .mall p {font-size: 1.325em; margin: 0 2em 100px;}

#about.trading .chart {padding: 100px 0;}

#about.trading .mall-list {margin: 100px 0 120px;}
#about.trading .mall-list li:not(:last-child) {margin-bottom: 85px;}

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

#about.pet .shop {margin: 100px 0 130px;}
#about.pet .shop .container {width: 840px;}
#about.pet .shop h2 {font-size: 2.625em; line-height: 1.25; margin-bottom: 32px;}
#about.pet .shop p {font-size: 1.325em; margin-bottom: 72px;}
#about.pet .shop .shop-list {display: flex; justify-content: space-between;}
#about.pet .shop .shop-list li {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 27.5%;}
#about.pet .shop .shop-list li .link {width: 220px; margin-top: 24px; padding: 8px 0;}

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

#about.system .service .service-list li {display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 130px;}
#about.system .service .service-list li:nth-child(even) {flex-direction: row-reverse;}
#about.system .service .service-list li .img {width: 470px;}
#about.system .service .service-list li:nth-child(odd) .img {margin-right: 30px;}
#about.system .service .service-list li:nth-child(even) .img {margin-left: 30px;}
#about.system .service .service-list li h3 {margin-bottom: 22px;}
#about.system .service .service-list li h3 .num {width: 85px; height: 85px; font-size: 2em; margin-right: 20px;}
#about.system .service .service-list li h3 .title {font-size: 1.8em;}
#about.system .service .service-list li p {font-size: 1.2em;}

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

/*--------------------------------------------------------------------------
採用情報 (recruit.php)
--------------------------------------------------------------------------*/
#recruit {padding: 40px 0;}
#recruit #single {margin: 0 20px 40px;}
#recruit #single h2 {margin: 0 -20px 30px;}

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

/*--------------------------------------------------------------------------
お問い合わせ (contact.php)
--------------------------------------------------------------------------*/
#contact {margin-bottom: 50px;}
#contact .image {height: 360px; margin-bottom: 80px; background-size: 100% auto; background-repeat: no-repeat; background-attachment: fixed; border-bottom-width: 10px;}

/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#state h1 {font-size: 2.5rem; font-weight: 500; text-align: center; line-height: 1.25; margin: 50px auto 0; padding: 60px 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; margin-right: 16px;}
#state .cat {display: inline-block; font-size: .85rem; color: #fff; line-height: 1; padding: 6px 8px; background: #ff901e;}

#single {font-size: 1rem; font-weight: 500; margin: 40px auto; padding: 0;}
#single h2 {font-size: 1.75em; line-height: 1.5; margin: 0 0 30px 0; padding: 0 7px 10px; border-bottom: 2px solid #00356e;}
#single h3 {position: relative; font-size: 1.45em; line-height: 1.5; margin: 0 0 30px 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.25em; line-height: 1.5; margin: 0 0 30px 0; padding-left: 10px; border-left: 5px solid #00356e;}
#single h5 {position: relative; font-size: 1.1em; line-height: 1.5; margin: 0 0 30px 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 30px 0; padding: 15px 30px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 0 0 30px 0;}
#single code {display: block; color: #fff; margin: 0 0 30px 0; padding: 20px; background: #364549;}

#single ul, #single ol {margin: 0 0 30px 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 table {border-collapse: collapse; text-align: left; line-height: 1.5; margin: 0 0 30px 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: 15px; vertical-align: middle;}
#single table th {padding: 15px 20px; 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: 20px auto;}
#single .alignright {float: right;}
#single .alignleft {float: left;}

/*前後記事*/
#postlink {display: flex; margin: 60px 20px; border: 1px solid #e0e0e0; border-radius: 5px;}
#postlink a {width: 50%; display: flex; position: relative;}
#postlink a.next {margin-right: auto; border-right: 1px solid #e0e0e0;}
#postlink a.prev {margin-left: auto; border-left: 1px solid #e0e0e0;}
#postlink a .arrow {display: flex; align-items: center; font-size: 1.5em; background: #000; padding: 0 12px; border-radius: 4px;}
#postlink a .arrow i {color: #fff;}
#postlink a h3 {font-size: 1.05em; padding: 15px;}
#postlink a .image {min-width: 120px; max-width: 120px; height: 80px; margin: 15px 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: 15px; border-radius: 4px 0 0 4px;}
#postlink a.prev .arrow {margin-left: 15px; border-radius: 0 4px 4px 0;}

.news-list {justify-content: flex-start; flex-wrap: wrap;}
.news-list .target {width: calc((100% - 40px) / 3); margin: 0 20px 20px 0;}
.news-list .target:nth-child(3n) {margin-right: 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; margin-right: 16px;}
.news-list .target .text .cat {display: inline-block; font-size: .85rem; color: #fff; line-height: 1; padding: 6px 8px; background: #ff901e;}
.news-list .target .text h3 {font-size: 1.1em;}

/*おすすめの記事*/
#more-posts {margin-bottom: 80px;}
#more-posts .news-list {flex-wrap: nowrap;}
#more-posts .news-list .target {width: calc((100% -45px) / 4); margin: 0 15px 15px 0;}
#more-posts .news-list .target .image {height: 165px!important;}
#more-posts .news-list .target .text time {font-size: .9rem}
#more-posts .news-list .target .text .cat {font-size: .75rem;}
#more-posts .news-list .target .text h3 {font-size: 1em!important;}

/*--------------------------------------------------------------------------
フォーム汎用
--------------------------------------------------------------------------*/
#form {margin: 0 auto;}
#form h3 {font-size: 1.4em;}
#form h3 small {display: inline-block; margin-left: 15px;}

#form form {margin-top: -30px;}
#form form > dl > dt {font-size: 1.175rem; padding: 30px 0 8px;}

#form input[type="text"],
#form input[type="email"],
#form input[type="tel"],
#form textarea {padding: 18px 28px;}
#form textarea {height: 168px;}

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

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

#form .privacy {margin: 80px auto 60px;}

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

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {height: calc(100vh - 85px);}
#notfound .container {width: 810px; height: 516px;}
#notfound h1 {font-size: 9em; margin-bottom: 10px;}
#notfound h1 span {margin-left: 15px;}
#notfound p {font-size: 1.5em; margin-top: 5px;}
#notfound a {width: 280px; font-size: 1.25em; margin-top: 30px;}