@charset "UTF-8";
/*----------------------------------------------------------------------------------------------------
 *
 * Theme Name: satsuki-jutaku-sherpa, Inc ver1.0
 * Theme URI: https://satsuki-jutaku-sherpa.jp
 * Author: kinjo aimi
 * Author URI: 
 * Description: sherpaのテーマ
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: dx-tax
 *
 *--------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
 *
 *
 * リセット
 *
 *
--------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html, body { width:100%; height:100%;}
ol, ul { list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; width: 100%; line-height: 1.7;}
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

/*--------------------------------------------------

   Clearfix

--------------------------------------------------*/
.cf { zoom:1; } .cf:before,.cf:after { content:""; display:table; } .cf:after { clear:both; }

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 基本設定
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
html { overflow:auto; line-height: 0;}
@media screen and (max-width:1000px){ body { width:1000px; } }
@media screen and (max-width:768px){ body { width:100%; background:#fff; } }
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Oswald&display=swap');

body {display: flex; flex-direction: column; min-height: 100vh; font-family:'Noto Sans JP', sans-serif; /* line-height: 1; */}
a:link,
a:visited { color:#000 ; text-decoration:none; transition:.3s ease; }
a:hover,
a:active { color:#000; text-decoration:none; transition:.3s ease; }
img { max-width:100%; height:auto; vertical-align:top; backface-visibility:hidden; }
a:link img,
a:visited img {opacity:1.0; transition:.3s ease; }
a:hover img,
a:active img {opacity: 0.6; transition: .3s ease; }
video::-webkit-media-controls-enclosure { overflow:hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 30px); }
.fa, .far, .fas {font-family: "Font Awesome 5 Free";}
/* ------------------------------小見出し属性------------------------------　*/
h1 , h2 ,h3 ,h4 ,h5 { margin:0; padding:0; line-height:1.7; margin:0 0 20px 0; font-weight:bold; color: #00376f;}
h1 { font-size:25px; }
h2 { font-size:26px; text-align:center; }
h3 { font-size:22px; }
h4 { font-size:18px; }
h5 { font-size:16px; }

@media screen and (max-width:766px){
/* 	h1 { font-size:10px;} */
	h2 { font-size:19px; }
	h3 { font-size:18px; }
	h4 { font-size:16px; }
	h5 { font-size:16px; }
}
p { font-size:16px; margin:0 0 20px 0; padding:0; line-height:2; display:block; color:#222; }
ul { margin:0; padding:0; }
li { margin:0; padding:0; font-size:16px; line-height:2;}
i { padding-right:6px; }
img { max-width:100%; height:auto; display:block; }
sup {vertical-align: super; font-size: 12px; margin-left: 2px; color: #e54155;}
strong {font-weight: bold;}

@media screen and (max-width:768px){
	p { font-size:14px; }
	li { font-size:14px; }
}
img.center,.aligncenter { margin:0 auto; display:block; }
img.left { float:left; margin:0 30px 30px 0; }
img.right { float:right; margin:0 0 30px 30px; }
img.photo00 { background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-left { transform:rotate(-4deg); -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-right { transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
.bold { font-weight:bold; }
.underline { text-decoration:underline; font-weight:bold; }
.red { color:#cd4a38; font-weight:bold; }
.red_underline { background:linear-gradient(transparent 60%, #ff9999 60%); }
.yellow { color:#000000; font-weight:bold; background:linear-gradient(transparent 60%, #ffff00 60%); }
.center { text-align:center; }
.big { font-size:20px; }
.sp00 { margin-top:0 !important; }
.sp10 { margin-top:10px !important; }
.sp20 { margin-top:20px !important; }
.sp30 { margin-top:30px !important; }
.sp50 { margin-top:50px !important; }
.sp70 { margin-top:70px !important; }
.sp100 { margin-top:100px !important; }
.align_left { text-align:left; }
.align_right { text-align:right; }
.align_center { text-align:center; }
.ffffff { background:#ffffff!important; }
.f7f7f7 { background:#f7f7f7!important; }
@media screen and (max-width:768px){
	img.left , img.right  { float:none; margin:0 auto 20px auto; display:block; }
	.big { font-size:16px; }
}
.pc { display:block!important; }
.sp { display:none!important; }
@media screen and (max-width:768px){
	.pc { display:none!important; }
	.sp { display:block!important; }
}
.back-main-color {background: #ffdc00;}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * ヘッダー
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
header {position: fixed; width: 100%; height: 70px; margin: 0 auto; background: #fff; z-index: 99999; border-bottom: 1px solid #eee; top:0; border-bottom: 1px solid #1898dc;
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
header h1 {margin-bottom: 0; padding-left: 1em;}
header #header {max-width: 1000px;} 
header #inner {width: 100%; margin: 0 auto; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#logo {margin: 0; margin-left: 15px; z-index: 99999;}
#logo img {height: 40px; width: auto; object-fit: contain; margin-right: 1em;}

@media screen and (max-width:768px){
 	header {height: 60px;} 
	header h1 {font-size: 3.5vw; padding-left: 0;}
  header #header {width: 100%;}
	header #inner { width:100%; height:auto; padding-left: 20px;}
	#logo {width: 50%; margin-right: 15px;}
}

/* ------------------------------トップページヘッダー------------------------------　*/
#header-wrapper {width: 100%;}


@media screen and (min-width:769px) and (max-width:1024px){
	header h1 {font-size: 16px;}
}


@media screen and (max-width:766px){
	#header-wrapper {width: calc(100% - 60px); margin-right: auto; margin: initial;}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * グローバルナビゲーション
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------グローバルナビゲーション（PC）------------------------------　*/
#check-menu,#btn-menu { display:none; }
.logo_sp { display:none; }
#global-nav {margin-left: auto;}    
#global-nav #menu-nav { margin: 0; padding: 0; height: 60px;
  display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#global-nav ul > li   {
  display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#global-nav ul > li:last-child a {color: #fff !important;}
#global-nav ul > li a {color: #00376f; padding: 23px; text-align: center; line-height: 1.5; font-weight: bold;}
#global-nav ol.menu-cta {height: 70px; display: flex; align-items: center;}
#global-nav li.menu-tel {display: flex; align-items: center; line-height: 1.2; padding: 10px 20px;}
#global-nav li.menu-tel a {font-size: 24px; color: #00376f; text-align: center; font-weight: bold; position: relative; padding-left: 40px;}
#global-nav li.menu-tel img {display: inline-block; margin-right: 10px; position: absolute; font-size: 28px; top: 50%; left: 7%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
#global-nav li.menu-tel span {display: block; font-size: 14px; margin-bottom: 0;}
#global-nav li.menu-contact a {background: #1898dc; height: 70px; padding: 15px; color: #fff; display: flex; align-items: center; font-size: 14px; text-align: center; line-height: 1.5; font-weight: bold;}
#global-nav li.menu-contact a img {display: inline-block; margin-right: 10px;}

@media screen and (min-width:1025px) and (max-width:1290px){
	header h1 {font-size: 18px;}
	#global-nav ul > li a {font-size: 14px; padding: 0px 1vw;  text-align: center;}
	#global-nav li.menu-tel a {font-size: 22px;}
	#global-nav li.menu-tel span {font-size: 10px;}
	#global-nav li.menu-contact a {font-size: 12px;}
}


@media screen and (min-width:769px) and (max-width:1024px){
	#h1 img {height: 50px; width: 190px; object-fit: contain;}
	#global-nav ul > li a {font-size: 12px; padding: 0px 15px;  text-align: center;}
	#global-nav li.menu-tel a {font-size: 24px;}
	#global-nav li.menu-tel span {font-size: 10px;}
	#global-nav li.menu-contact a {font-size: 10px;}
}
 
    
/* ------------------------------グローバルナビゲーション（モバイル）------------------------------　*/
@media screen and (max-width:768px){
	.logo_sp { display:block; position:absolute; top:8px; left:10px; width:130px; }
	nav#header-nav { background:#fff; width:100%; height:auto; margin:0; position:fixed; top:0; z-index: 9999; border-bottom: 1px solid #eee;}
	nav#header-nav a { text-decoration:none; transition: .3s ease-in-out;}
	input[type="checkbox"]#check-menu:checked + #btn-menu { width:60px; height:60px; background:url(images/mobile.svg) no-repeat; background-color: #0e428d; transition: .3s ease-in-out;}
	input[type="checkbox"]#check-menu:checked ~ #menu-nav { display:block; height: 100vh; margin-top: 60px; overflow: scroll; background: #f5f5f5; padding-top: 40px; transition: .3s ease-in-out;}
	#btn-menu { width:60px; height:60px; display:block; background:url(images/mobile.svg) no-repeat; color:#ffffff; float:right; background-color: #0e428d;}
	#menu-nav { display:none; list-style:none; }	
	nav#global-nav {width: 100%; margin: 0 auto; position: fixed; z-index: 9999; top: 0; right: 0; transition: .3s ease-in-out;}
	#global-nav a:hover {color: #000 !important; background: #d5f2ff;}
	#global-nav #menu-nav {list-style: none; width: 100%; background: #f5f5f5; display: none; transition: .3s ease-in-out;}
	#global-nav > ul > li {width: 100%; position: relative; display: block; height: auto;}
	#global-nav > ul > li a {text-decoration: none; display: block; padding: 20px; text-align: left; border-bottom: 1px solid #fff;
		-moz-transition: background-color .3s linear; -webkit-transition: background-color .3s linear; transition: background-color .3s linear; }
	#global-nav > ul > li a:hover { color: #fff; background: #d5f2ff;}
	#global-nav li.menu-tel  {padding: 0; margin-bottom: 5%;}
	#global-nav li.menu-tel a {width: 90%; margin: 0 auto; border: 1px solid; border-radius: 50px; padding: 15px 0; position: relative;}
  #global-nav li.menu-tel img {display: inline-block; margin-right: 10px; position: absolute; font-size: 28px; top: 50%; left: 10%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	#global-nav ol.menu-cta {display: block; height: auto; padding: 30px 0; }
	#global-nav li.menu-contact a {width: 90%; text-align: center; display: block; border-radius: 50px; height: 80px; position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
  #global-nav li.menu-contact img {display: inline-block; margin-right: 10px; position: absolute; font-size: 28px; top: 50%; left: 10%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * コンテンツ
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------共通------------------------------　*/
section { width:100%; }
.inner {width: 95%; max-width: 1100px; margin:0 auto; padding:100px 0; position: relative; z-index: 0;}
section .ttl {position: relative; }
section .ttl img {margin: 0 auto 20px;}
section .ttl h1 {font-weight: 600; margin-bottom: 20px; text-align: center; font-size: 40px; line-height: 1.5; margin-bottom: 50px; color: #00376f;}
section .ttl h1 span {display: block; font-size: 24px; color: #5f89af; font-family: 'Oswald', sans-serif; letter-spacing: 0.1em;}
.bg-blue {background: #e1e9f2;}
p.lead  {text-align: center; font-size: 20px;}
.btn-wrapper {margin: 50px auto 0; text-align: center;}
.btn {text-align: center; border-radius: 35px; font-weight: bold; display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; padding: 23px 20px; display: inline-block;line-height: 1;} 
.btn:hover {background: none; color:#0089d7 !important; border: 1px solid #0089d7;}
.btn-more {max-width: 350px; width: 100%; border: 2px solid #00376f; color: #00376f !important; font-size: 17px; position: relative;}
.btn-more:after {content: ''; transform: rotate(-45deg); top: 50%; position: absolute; top: 41%; right: 22px; width: 10px; height: 10px; border-top: 2px solid #00376f; border-right: 2px solid #00376f;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.btn:hover:after {border-top: 2px solid #1898dc; border-right: 2px solid #1898dc;}
.btn-contact {max-width: 400px; width: 100%;}
a.anchor-link {text-decoration: underline; color: #1898dc;}
/* .page-anchor {display: block; padding-top: 100px; margin-top: -100px;} */

@media screen and (max-width:966px) {
	section .inner { width:90%; padding:60px 0; }
}
@media screen and (max-width:466px) {
	section .ttl h1 {font-size: 7vw; margin-bottom: 30px;}
	section .ttl h1 span {font-size: 4vw;}
	p.lead  {font-size: 4.5vw;}
}


/*--------------------------------------------------------------------------------
 * メインビジュアル
--------------------------------------------------------------------------------*/
#index {height: auto; margin-top: 70px; position: relative;}
.container {
  position: relative;
  width: 100%;
  height: 650px;
}
.kv-txt {position: absolute; top: 0; left: 0; height: 650px; }
.kv-txt img {width: 100%; height: 100%; object-fit: cover; object-position: 30%;}
.kv-image {
  position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
    object-fit: cover;
	animation: change-img-anim 15s infinite;
}
.kv-image:nth-of-type(1) {
  animation: change-img-anim-first 15s infinite;
	animation-delay: 0s;
}
.kv-image:nth-of-type(2) {
	animation-delay: 7.5s;
}

@keyframes change-img-anim-first {
	0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}



@media(min-width: 767px){
  a[href^="tel:"]{pointer-events: none;}
}

@media screen and (max-width: 1500px){
    .container {height: 550px;}
    .kv-txt {height: 550px;}
}

@media screen and (max-width: 1300px){
    .container {height: 480px;}
    .kv-txt {height: 480px;}
}

@media screen and (max-width: 766px){ 
    #index {margin-top: 60px;}
    .container {height: 1080px;}
    .kv-image {object-position: top;}
    .kv-txt {width: 100%; height: auto;  bottom: 0; top: auto;}
    .kv-txt img {width: 100%; object-fit: contain;}
}

@media screen and (max-width: 566px){ 
    .container {height: 700px;}
}

@media screen and (max-width: 466px){ 
    .container {height: 600px;}
}


@media screen and (max-width: 350px){
    .container {height: 540px;}
}


/*--------------------------------------------------------------------------------
 * strength
--------------------------------------------------------------------------------*/
.strength ul li {border: 2px solid #1898dc; display: flex; align-items: center; justify-content: space-between; border-radius: 15px; padding: 30px; margin: 40px 0;}
.strength .img-wrapper {width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; background: #e1e9f2; border-radius: 50%;}
.strength .img-wrapper img {height: 45px; object-fit: contain;}
.strength .txt-wrapper {flex-basis: calc(100% - 120px);}
.strength .txt-wrapper h2 {color: #00376f; text-align: left;}
.strength .txt-wrapper p {margin-bottom: 0;}

@media screen and (max-width: 766px){
	.catch .txt-wrapper p {font-size: 16px;}
}

@media screen and (max-width: 466px){
	.strength ul li {display: block;}
	.strength .img-wrapper {margin: 0 auto 30px;}
}

/*--------------------------------------------------------------------------------
 * achievement
--------------------------------------------------------------------------------*/
.achievement {
	background-image: url(img/achievement.jpg);
  background-image: image-set(url(img/achievement.jpg) 1x, url(img/achievement@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/achievement.jpg) 1x, url(img/achievement@2x.jpg) 2x);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.achievement ul {display: flex; justify-content: space-between; }
.achievement ul > li {flex-basis: 32%; border: 2px solid #1898dc; background: #fff; border-radius: 15px; padding: 30px 20px 50px 20px; position: relative;}
.achievement .txt-wrapper {border-bottom: 1px solid; padding-bottom: 15px; margin-bottom: 15px;}
.achievement ul > li h2 {font-size: 25px; color: #1898dc; margin-bottom: 7px;}
.achievement ul > li h3 {font-size: 20px; margin: 0;}
.achievement ul > li p.align_right {bottom: 0px; position: absolute; right: 20px;}
ol.p-list > li {position: relative; padding-left: 20px;}
ol.p-list > li::before {content: ''; width: 12px; height: 6px; border-left: 3px solid #1898dc; border-bottom: 3px solid #1898dc; transform: rotate(-45deg); left: 0; top: 50%; position: absolute; top: 10px;}

@media screen and (max-width: 966px){
	.achievement ul {display: block;}
	.achievement ul > li {display: flex; justify-content: space-between; margin: 20px 0;}
	.achievement .txt-wrapper {flex-basis: 35%; border-bottom: none; border-right: 1px solid; padding-bottom: 0; margin-bottom: 0;}
	.achievement ol.p-list {flex-basis: 60%;}
}

@media screen and (max-width: 766px){
	.achievement ul > li {display: block; margin: 30px 0;}
	.achievement .txt-wrapper {border-bottom: 1px solid; border-right: none; padding-bottom: 15px; margin-bottom: 15px;}
	.achievement ul > li h2 {font-size: 6vw;}
	.achievement ul > li h3 {font-size: 5vw;}
}

/*--------------------------------------------------------------------------------
 * service
--------------------------------------------------------------------------------*/
.service-wrapper {background: #fff; padding: 50px 30px; border-radius: 20px; margin: 50px 0;}
h2.service-ttl  {font-size: 25px;}
h2.service-ttl span {background: #1898dc; color: #fff; width: 45px; height: 45px; display: inline-block; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 5px;}

/*
table.scroll {
width:100%;
table-layout: inherit;
white-space: inherit;
-webkit-overflow-scrolling: touch; 
}
*/
table.service-table thead {background: #00376f; color: #fff; font-size: 16px; font-weight: bold; text-align: center; padding: 10px 10px 10px 10px;}
table.service-table thead th {border: 1px solid #000; /* width: 40%; */ vertical-align: middle;}
table.service-table thead td {padding: 15px 10px; border: 1px solid #000; /* width: 60%; */ vertical-align: middle;}

table.service-table tbody th {/* width: 80px; */ padding: 10px 0 10px 10px; border: 1px solid; width: 50%;}
/* table.service-table tbody th div {display: flex; align-items: baseline;} */
.icon {text-align: left; margin-bottom: 10px;}
table.service-table tbody th div i {width: 70px; margin-right: 10px;}
table.service-table tbody td {font-size: 14px; border: 1px solid; width: 50%; padding: 10px;}
table.service-table tbody td {margin-bottom: 10px; /* display: block; */ text-align: right; margin-right: 20px;}
    
table.service-table tbody td .flex-wrapper {/* display: flex; align-items: center; */}
table.service-table tbody td .flex-contents:first-of-type {/* border-right: 1px solid #000; */ /* flex-basis: 80%; */ /* padding: 0px 0px 0px 10px; */}
/* table.service-table tbody td .flex-contents:last-of-type {flex-basis: 20%; text-align: center;} */
table.service-table ul.service-targets {/* padding: 10px; */ margin-bottom: 10px;}
table.service-table tbody h3 {font-size: 14px; position: relative; text-align: left; padding-left: 15px; color: #000; margin: 0; text-align: justify;}
/*
table.service-table tbody h3 span {position: absolute; font-size: 10px; top: 12px; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 15px; height: 15px; border: 1px solid;
    border-radius: 50px; display: flex; align-items: center; justify-content: center; line-height: 1;}
*/
table.service-table tbody h3 span {position: absolute; left: 0;}    
    
table.service-table a {text-decoration: underline;}

ul.service-targets {list-style: none !important; padding-left: 0 !important;}
ul.service-targets > li {position: relative; padding-left: 20px; line-height: 1.6; padding-top: 3px; padding-bottom: 3px; font-size: 14px; text-align: justify;}
ul.service-targets > li:before {content: "□";position: absolute; left: 0; font-size: 16px; line-height: 1.4;}
i.a-scrivener {background: #00376f; color: #fff; padding: 5px; border-radius: 2px; font-size: 12px;}
i.eve-con {background: #1898dc; color: #fff; padding: 5px; border-radius: 2px; font-size: 12px;}

@media screen and (max-width: 766px){
	h2.service-ttl {font-size: 5.5vw;}
    .service p.lead {text-align: left;}
    .service-wrapper {background: #fff; padding: 5%; border-radius: 15px; margin: 10% 0;}
    table.service-table tbody th {padding: 10px;}
    table.service-table tbody th div {display: block; text-align: left; margin: 0 0 5px 0;}
    table.service-table tbody td {padding: 10px;}
/*     table.service-table ul.service-targets {padding: 0;} */
}

@media screen and (max-width: 466px){
	
	table.service-table tbody td .flex-wrapper {display: block;}
	table.service-table tbody td .flex-contents:first-of-type {border-right: none; padding: 0px 0px 0px 10px;}
	table.service-table tbody td .flex-contents:last-of-type {padding: 0 10px 10px 0; text-align: right;}
}


/*--------------------------------------------------------------------------------
 * CTA
--------------------------------------------------------------------------------*/
.cta {background: #02326d;}
.cta .inner {padding: 60px 0;}
.cta .ttl {margin-bottom: 45px;}
.cta .ttl h2 {font-size: 26px; color: #fff; text-align: center;}
.cta .ttl span {background: #1898dc; font-size: 25px; padding: 10px; margin-right: 5px;}
.cta p {text-align: center; color: #fff;} 
.cta .cta-wrapper {display: flex; justify-content: space-between;}
.cta .cta-btn-wrapper {flex-basis: 80%; padding-right: 50px; border-right: 1px solid #fff;}
.cta .line-wrapper {flex-basis: 20%; padding-left: 50px;}
.cta .line-wrapper p {font-size: 20px; margin-bottom: 5px;}
.cta ul {
	display:-webkit-box; display:-ms-flexbox; display: flex;  
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.cta ul li {flex-basis: 48%;}
.cta ul li a {padding: 20px 0px 20px 20px; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 100px; position: relative;}
.cta ul li:first-child a {border: 1px solid #fff;}
.cta ul li:first-child p {font-size: 28px; text-align: center; color: #fff;}
.cta ul li:first-child p span {font-size: 16px;}
.cta ul li:last-child a {background: #1898dc;}
.cta ul li:last-child p {font-size: 16px; color: #fff; text-align: center;}
.cta ul li img {width: 33px; position: absolute; top: 50%; left: 13%; -ms-transform: translate(-50%,-50%);  -webkit-transform: translate(-50%,-50%);  transform: translate(-50%,-50%); }
.cta ul li p {font-weight: bold; margin-bottom: 0; font-feature-settings: "palt"; letter-spacing: 1px; line-height: 1.5; font-size: 16px;}
.cta ul li p span {display: block;}

@media screen and (max-width:966px) {
	.cta ul {display: block;}
	.cta ul li {width :100%; position: relative; margin-bottom: 5%; padding: 0; width: 100%; height: 90px;
    display:-webkit-box; display:-ms-flexbox; display: flex; 
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
  .cta ul li a {width: 100%;}
}

@media screen and (max-width:766px){
	.cta .ttl h2 {font-size: 5vw;}
	.cta .ttl h2 span {margin-right: 0; display: inline-block; padding: 4px 8px; margin-bottom: 10px; font-size: 4.5vw;}
	.cta .cta-wrapper {display: block;}
	.cta .cta-btn-wrapper  {padding-right: 0; border-right: none; border-bottom: 1px solid #fff; padding-bottom: 10%;}
	.cta .line-wrapper {padding-left: 0; padding-top: 5%;}
	.cta .line-wrapper img {margin: 0 auto; max-width: 120px;}
/*
	.cta ul {display: block;}
	.cta ul li {width :100%; position: relative; margin-bottom: 5%; padding: 0; width: 100%; height: 90px;
    display:-webkit-box; display:-ms-flexbox; display: flex; 
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
*/
	.cta ul li:last-child {margin-bottom: 0;}
	
  .cta ul li img {width: 7vw;}
  .cta ul li p {font-size: 16px;}
}

/* ------------------------------関連記事一覧------------------------------　*/
p.kanren { font-size:14px; margin:0; padding:0; font-weight:bold; }
ul.related { margin:0; }
ul.related li { border-bottom:1px dotted #cccccc; padding:20px 0; }
ul.related img { display:block; width:100px; height:100px; float:left; margin:0 20px 0 0; padding:0; }
ul.related a { font-size:10px; font-weight:normal; }
ul.related p { margin:0; padding:0; font-size:10px; }
ul.related p.title { font-size:14px; font-weight:bold; }

/*---リンク領域をBOX全体に---*/
ul.related li { position:relative; }
ul.related li a { position:absolute; width:100%; height:100%; top:0; left:0; text-indent:100%; /*テキスト非表示*/ white-space:nowrap; /*テキスト非表示*/ overflow:hidden; /*テキスト非表示*/ display:block; }
ul.related li a:hover { opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; background:#fff; }

/*--------------------------------------------------------------------------------
 *
 * ブログ
 *
--------------------------------------------------------------------------------*/

/* ------------------------------　記事関連（下層）------------------------------　*/
ul.post {width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
ul.post li {flex-basis: 31%; margin: 10px 0;}
/* ul.post li a {display: flex; justify-content: space-between; width: 100%;} */
ul.post li .img-wrapper {flex-basis: 40%;}
ul.post li .txt-wrapper {flex-basis: 55%;}
ul.post li .date-wrapper {margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline;}
ul.post li img {width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;}
.category {display: inline-block; background: #1898dc; padding: 0px 7px; color: #fff; font-weight: bold; top: 0; left: 0; font-size: 12px; margin-left: 10px !important;}
.ymd {margin-right: 10px; margin-bottom: 0; font-size: 16px;}
/* ul.post li .date-wrapper .ymd {float: left; padding: 2px 0;} */
ul.post li p { font-size:14px; margin:0;}
ul.post li h3 {font-size: 20px;}

@media screen and (max-width:766px){
	ul.post li { width:100%; flex-basis:100%; margin:10px 0;  background:#fff; display: block;}
	ul.post li a {flex-wrap: wrap;}
	ul.post li .img-wrapper {flex-basis: 100%; margin-bottom: 30px;}
	ul.post li .txt-wrapper {flex-basis: 100%;}
	ul.post li h3 {margin-top: 10px;}
	ul.post li .category {font-size: 12px;}
}



/* ------------------------------関連記事------------------------------　*/
ul.post02 { width: 100%; 
	 display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap: wrap;}
 ul.post02 li {position: relative; width: calc((100% - 80px)/ 3); flex-basis: calc((100% - 80px)/ 3); margin: 10px 0; padding: 0 0 20px 0; background: #fff;}
ul.post02 li:nth-child(3n+2) {margin: 10px 40px;} 
ul.post02 li .date-wrapper {margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline;}
ul.post02 li img {width: 100%; margin-bottom: 10px; height: 180px; object-fit: cover; border-radius: 10px;}
ul.post02 li .category {display: inline-block; background: #1898dc; padding: 0px 7px; color: #fff; font-weight: bold; top: 0; left: 0; font-size: 12px;}
ul.post02 li .ymd {margin-right: 10px; font-size: 16px;}
/* ul.post li .date-wrapper .ymd {float: left; padding: 2px 0;} */
ul.post02 li p { font-size:14px; margin:0;}
ul.post02 li h3 { font-size:16px; font-weight:bold; margin-bottom: 10px; }

@media screen and (max-width:766px){
	ul.post li { width:100%; flex-basis:100%; margin:10px 0;  background:#fff; display: block;}
	ul.post li:nth-child(3n+2) {margin: 10px 0;}
	ul.post li h3 {margin-top: 10px;}
	ul.post li .category {font-size: 12px; margin-left: 10px;}
}

@media screen and (max-width:768px){
	ul.post02 li { width:100%; flex-basis:100%; margin:10px 0; padding:7%; background:#fff; }
	ul.post02 li:nth-child(3n+2) { margin:10px 0px; }
}
/* ------------------------------トップページへ戻るボタン------------------------------　*/

a.button { background: #ffdc00;
    border: 3px solid #000;
    min-width: 300px;
    /*height: 55px;*/
    text-align: center;
    margin: auto;
    display: table;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px; padding: 18px 40px; margin: 60px auto 0 auto;}
a.button span {display: block; font-weight: normal; margin-top: 10px;}
a.button:hover {background:#000; color:#fff !important; }

@media screen and (max-width:768px){
	a.button { width:100%; padding:20px; min-width: auto;}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * フッター
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
footer { position:relative; width:100%; margin:0; background:#0e428d; z-index:999;  margin-top: auto;}
.footer-inner {display: flex; justify-content: space-between; padding: 80px 0; width: 90%; margin: 0 auto;}
.footer-left {padding-right: 30px; flex-basis: 45%;}
.footer-left h2 {font-size: 27px; color: #fff; margin-bottom: 15px; text-align: left;}
.footer-left dl {padding: 15px 0; color: #fff;}
.footer-left dt {font-weight: bold; font-size: 13px; line-height: 1.7; }
.footer-left dd {font-size: 13px; line-height: 1.7; }
.footer-right {border-left: 1px solid #fff; padding-left: 30px; flex-basis: 55%;}
.footer-right ul.list-01  {display: flex; flex-wrap: wrap;}
.footer-right ul.list-01:first-of-type {margin-bottom: 45px;}
.footer-right ul.list-01 > li {color: #fff; position: relative; padding-left: 20px; line-height: 3;}
.footer-right ul.list-01 > li::before {content: '●'; left: 0; position: absolute; top: 4px; color: #1898dc; font-size: 12px;}
.footer-right ul.list-01 > li a {color: #fff; padding-right: 40px; display: block; font-weight: bold; font-size: 14px;}
.footer-right ul.list-01 > li a:hover {color: #1898dc;}
.footer-right ul.list-01 section {padding: 15px 0;}
.footer-right ul.list-01 p {color: #fff; font-size: 12px; font-weight: bold; margin-bottom: 5px;}
.footer-right ul.list-02 {display: flex; flex-wrap: wrap;}
.footer-right ul.list-02 > li {position: relative;}
.footer-right ul.list-02 > li span {position: absolute; left: 0;}
.footer-right ul.list-02 > li a {font-size: 12px; padding: 0px 0 0 15px; font-weight: normal;}
.footer-right ul.list-02 > li:not(:last-of-type) a::after {content: ' | '; font-size: 12px; padding: 0 5px; color: #fff !important;}
address {font-size: 10px; text-align: center; padding: 20px 0; background: #000; color: #fff; line-height: 1.5;}

@media screen and (max-width:766px){
	footer {padding: 40px 0 0px 0;}
	.footer-inner {flex-direction: column-reverse; padding: 0;}
	.footer-left {padding-right: 0; flex-basis: 100%; padding-top: 10%;}
	.footer-left h2 {font-size: 6vw; margin: 0;}
	.footer-right {border-left: none; padding-left: 0; flex-basis: 100%; border-bottom: 1px solid #fff; padding-bottom: 5%;}
	.footer-right ul.list-01:first-of-type {margin-bottom: 4%;}
	.footer-right ul.list-01:first-of-type > li {flex-basis: 50%; line-height: 3;}
	address {font-size:10px; text-align:center; }
}

@media screen and (max-width:466px){
	.footer-right ul.list-02 > li {flex-basis: 100%;}
	.footer-right ul.list-02 > li:not(:last-of-type) a::after {content: none;}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 *  サイドバー
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
/*
 aside {background: #fff; width: 270px; margin-left: auto;}
 aside div {margin-bottom: 20px;}
 aside p {height: 50px; font-weight: bold;  padding: 20px; font-size: 16px;
    display: flex;
    align-items: center;
 color: #0089d7;
    border-bottom: 3px solid #0089d7;
    background-color: #e7f7ff;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fff),color-stop(.75, #fff), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 8px 8px;
    }
div #sidebar {
    position: sticky;
    top: 20px;
    background: #fff;
}

 aside div ul li {border-bottom: 2px solid #e7f7ff; padding: 15px 20px;}
 aside div ul li:last-child {border: none;}
 
 @media screen and (max-width:768px){
	  aside {width: 100%; margin-top: 60px;}
	 
}
*/
/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * その他（jQueryなど）
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------ページトップへ戻る------------------------------　*/
#pageTop { position:fixed; bottom:20px; right:20px;}
#pageTop a { display:block; z-index:999; margin:0; padding:0; width:60px; height:60px; background:url(img/top.png) no-repeat 0 0; }
#pageTop a:hover { text-decoration:none; opacity:0.7; }
@media screen and (max-width:768px){
	#pageTop , #pageTop a { display:none; }
}

/* ------------------------------グローバルナビ上部固定------------------------------　*/
.fixed { position:fixed; top:0; width:100%; z-index:10000; }
@media screen and (max-width:768px){
.fixed { position:static; }
}

/* ------------------------------ページ下部固定CTA------------------------------　*/
#buttonTow , #buttonTow a { display:none; }
@media screen and (max-width:766px){
#buttonTow {position:fixed; bottom:0; background:rgba(0,0,0,0.5); width:100%; height:auto; z-index:1000; border-top: 1px solid #fff;}
#buttonTow ul {display:-webkit-box; display:-ms-flexbox; display: flex;}
#buttonTow ul li {width: calc(100% / 3); padding: 10px; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#buttonTow ul a i {display: block; margin-bottom: 5px; font-size: 30px; padding-right: 0;}
/* #buttonTow ul li:not(:last-child ) {border-right: 2px solid #fff;} */
#buttonTow ul li:first-child {background:#02326d;}
#buttonTow ul li:nth-child(2) {background:#1898dc;}
#buttonTow ul li:last-child {background: #00B900;}
#buttonTow a { display:block; text-align:center; font-size:12px; color:#ffffff; line-height: 1.5;}
#buttonTow a img { margin:0 auto; padding:0; }
#buttonTow a:hover { text-decoration:none; opacity:0.7; }
}

/* ------------------------------ページ下部固定CTA_PC------------------------------　*/
#buttonPc {position:fixed; bottom:0; background:#191e32; width:100%; height:auto; z-index:1000; }
#buttonPc a#pc_box { display:block; width:100%; height:auto; color:#ffffff; padding:15px 0; text-align:center; font-size:16px; }
 i {padding-right:5px; }
 #buttonPc a:hover { text-decoration:none }

@media screen and (max-width:768px){
	#buttonPc { display:none; }
	#buttonPc a#pc_box { display:none; }
}

/* ------------------------------アコーディオン------------------------------　*/
.accordion dl, .accordion dt, .accordion dd{ margin:0; padding:0; }
.accordion dt { display:block; width:100%; height:auto; line-height:1.4; cursor:pointer; border-radius:30px; background:#ffffff; font-size:15px!important; font-weight:bold; color:#000000; 
	margin:0; padding:16px 30px 16px 16px; box-shadow: 0px 6px rgba(0,0,0,1); border:2px solid #000000; text-align:center; }
.accordion dt:after { content:"▼"; margin-left:10px }
.accordion dt.close { background:#000000; color:#ffffff; box-shadow:none }
.accordion dt.close:after { content:"▲"; }
.accordion dd { width:100%; height:auto; display:none; margin:0; padding:60px 0 0 0; }
.accordion dd img { border-radius:20px; border:3px solid #000000; box-shadow:6px 6px rgba(0,0,0,0.3); margin:0 0 30px 0;}
.accordion br { display:inline; }

/* ------------------------------フェードインアニメーション------------------------------　*/
.sa {opacity: 0; transition: all .5s ease; } /* ノーマル */
.sa.show {opacity: 1; transform: none; } /* ノーマル */
.sa-lr {transform: translate(-100px, 0); } /* 右から */
.sa-rl {transform: translate(100px, 0); } /* 左から */
.sa-up {transform: translate(0, 100px); } /* 下から */
.sa-down {transform: translate(0, -100px); } /* 上から */
.sa-scaleUp {transform: scale(.5); } /* 縮小→拡大 */
.sa-scaleDown {transform: scale(1.5); } /* 拡大→縮小 */
.sa-rotateL {transform: rotate(180deg); } /* 左回転 */
.sa-rotateR {transform: rotate(-180deg); } /* 右回転 */

/* ------------------------------ふわふわ------------------------------　*/
@keyframes horizontal {
    0% { transform:translateX( -5px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
img.huwahuwa { animation: horizontal 2s ease-in-out infinite alternate; }
img.huwahuwa { animation: vertical 2s ease-in-out infinite alternate; }
img.huwa01 { animation-duration: 1.1s}
img.huwa02 { animation-duration: 1.3s}
img.huwa03 { animation-duration: 1.5s}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 30px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}