@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ヘッダー**************************************************************/

.l-header__bar {
	background: none;
}
.l-header__bar .c-catchphrase {
	background: none;
	width: 100% !important;
}

.l-header__logo {
	padding: 5px 0px 10px 0px !important;
}

.l-header__gnav {
	padding: 0px 0px 5px 0px !important;
}

/* ヘッダーお問合せボタン**************************************************************/

.contact-btn a {
	padding: 10px 20px 10px 25px !important;
	margin-left: 10px !important;
	font-size: 14px !important;
	white-space: nowrap;
}
.contact-btn a:hover {
	opacity: 0.7 !important;
	box-shadow: none !important;
}

/* フッター**************************************************************/

.l-footer__foot {
	padding-bottom: 50px !important;
}

.l-footer__widgetArea {
	padding-bottom: 0px !important;
}

.w-beforeFooter {
	margin-bottom: 0px !important;
	margin-top: 0px !important;
}



/* 見出し**************************************************************/

.c-pageTitle {
    display: none;
}
.l-mainContent__inner>.post_content {
margin-top: 0;
}

.page h2 {
	font-size: 24px; /*文字サイズ*/
	font-weight: bold; /*文字太さ*/
	color: #005c84; /*文字色*/
	position: relative; /*要素相対配置*/
	border-bottom: 2px solid #005c84; /*下線太さ・種類・色*/
	padding: 0px 0px 3px 0px; /*上下左右余白*/
}
.page h2::after {
	position: absolute; /*要素絶対配置*/
	bottom: -2px; /*左線位置*/
	left: 0; /*左線位置*/
	width: 30%; /*左線長さ*/
	border-bottom: 2px solid #ccc; /*左線太さ・種類・色*/
	content: '';
}
.page h2::before {
	position: absolute; /*要素絶対配置*/
	bottom: -2px; /*右線位置*/
	right: 0; /*右線位置*/
	width: 30%; /*右線長さ*/
	border-bottom: 2px solid #ccc; /*右線太さ・種類・色*/
	content: '';
}
.page h3 {
	font-size: min(3.8vw,22px); /*文字サイズ*/
	font-weight: bold; /*文字太さ*/
	color: #000; /*文字色*/
	display: inline-block;
	border-bottom: 4px solid #005c84; /*下線太さ・種類・色*/
	padding: 0px 0px 3px 0px; /*上下左右余白*/
	margin: 10px 0px 20px 0px !important; /*上下左右余白*/
}


/* ボックスエリア**************************************************************/

.philosophy-box {
	width:100% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	height: 50%;
	padding: 20px 20px 20px 20px !important;
}

.workflow-box {
	width:100% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 50px 20px 50px 20px !important;
    outline : 1px solid #FFFFFF;
    outline-offset : -10px
}

@media screen and (max-width: 599px) {

.workflow-box {
	padding: 20px 20px 20px 20px !important;

}
}

/* フォント**************************************************************/

.subtitle {
	font-size: 20px; /*文字サイズ*/
	font-weight: bold; /*文字太さ*/
	color: #fff; /*文字色*/
	display: inline-block;
	border-bottom: 3px solid #fff; /*下線太さ・種類・色*/
	padding: 0px 0px 1px 0px; /*上下左右余白*/
	margin: 0px 0px 5px 0px !important; /*上下左右余白*/
	text-align: center;
}
.features-subtitle {
	font-size: 26px; /*文字サイズ*/
	font-weight: bold; /*文字太さ*/
	color: #000; /*文字色*/
	display: inline-block;
	border-top: 3px solid #000; /*下線太さ・種類・色*/
	padding: 5px 0px 0px 0px !important; /*上下左右余白*/
	margin: 0px 0px 15px 0px !important; /*上下左右余白*/
	text-align: center;
}
.title-36px {
	font-size: min(3vw, 36px); /*文字サイズ*/
	font-weight: 800; /*文字太さ*/
	color: #000; /*文字色*/
	padding: 0px 0px 0px 0px; /*上下左右余白*/
	line-height: 1.5;
}

.text-lines{
	line-height: 1.5 !important;
}

/* タブレット用フォント・画像**************************************************************/
@media screen and (max-width: 959px) {
.title-36px {
	font-size: 30px !important; /*文字サイズ*/
}
.text-18px{
	font-size: 18px !important;
}
.text-20px{
	font-size: 16px !important;
}
.text-24px{
	font-size: 20px !important;
}
}


/* スマホ用フォント・画像**************************************************************/
@media screen and (max-width: 599px) {
.page h2 {
	font-size: 20px !important; /*文字サイズ*/
}
.text-18px{
	font-size: 16px !important;
}
.text-20px{
	font-size: 16px !important;
}
.text-24px{
	font-size: 20px !important;
}
.text-28px{
	font-size: 20px !important;
}
.title-36px {
	font-size: 28px !important; /*文字サイズ*/
}
	
.sp-left{
	text-align: left !important;
}
.img-sp30 {
	width:30% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.img-sp50 {
	width:50% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.img-sp70 {
	width:70% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.img-sp-none{
	display:none !important;
}
}



/* ブログパーツ**************************************************************/

.contact-box {
	width:90% !important;
	text-align: center !important;
	margin-left:auto !important;
	margin-right:auto !important;
}


/* ブログパーツ上下左右余白**************************************************************/
.p-blogParts {
    margin: 0px 0px;
}

/* 投稿リスト**************************************************************/
.p-postList__item {
	margin-bottom:20px !important;
}
.p-postList__body {
	padding-top:5px !important;
}
.p-postList__title {
	font-size: 14px !important;
}

/* 無限ループアニメーション */
@keyframes infinite-loop {
  to {
    transform: translateX(-100%);
  }
}
/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
  /* 設定項目 START */
  --item-max-width: 400px; /* 各アイテムの最大幅 */
  --item-mobile-width: 50vw; /* スマホでのアイテムの幅 */
  --duration: 20s; /* アニメーションスピード */
  --gap: 1rem; /* 各アイテム同士の間隔 */
  /* 設定項目 END */
  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}
.infiniteLoop.-reverse{
	--direction: reverse;
	--flex-direction: row-reverse
}
.infiniteLoop:hover{--play-state: paused}
.infiniteLoop>*{display:flex}
.infiniteLoop>*>*>*{
	overflow:hidden;
	transform:translateX(0);
	flex-wrap:nowrap !important;
	flex-direction:var(--flex-direction, row);
	margin:0 !important;
	padding-left:var(--gap) !important;
	gap:var(--gap);
	width:calc(var(--infinite-loop_width, 100vw)*1)
}
.infiniteLoop>*>*>*>*{padding:0 !important}
.infiniteLoop>*>*>*>*>*{
	max-width:var(--item-max-width, 0px);
	margin-inline:auto
}
@media(min-width: 600px){
	.infiniteLoop>*>*>*{
	animation:infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);
	will-change:transform;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden
	}
}
@media not all and (min-width: 600px){
.infiniteLoop>*>*:nth-child(n+2){display:none}
.infiniteLoop>*>*>*{-webkit-scroll-snap-type:
	x mandatory;scroll-snap-type:x mandatory;
	overflow-x:scroll;
	padding:0 calc((100vw - var(--item-mobile-width, 100vw)) / 2) !important;
	-webkit-overflow-scrolling:touch;
	-ms-overflow-style:none;
	scrollbar-width:none
	}
.infiniteLoop>*>*>*::-webkit-scrollbar{display:none}
.infiniteLoop>*>*>*>*{flex-shrink:0;
	width:var(--item-mobile-width, 50vw) !important;
	scroll-snap-align:center
	}
}


.main-visual-02 {
	display: none !important;
}
@media screen and (max-width: 959px) {
.main-visual-02 {
	display: none !important;
}
}

@media screen and (max-width: 599px) {
.main-visual-01 {
	display: none !important;
}
.main-visual-02 {
	display: block !important;
}	
}


/*　リンクボタン**************************************************************/

.contact-box {
	width:95% !important;
	text-align: center !important;
	margin-left:auto !important;
	margin-right:auto !important;
	gap: 5px !important;
	height: 100% !important;
}
.contact-btn-a a {
	font-size: 20px !important;
	height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	padding: 5% 0px 5% 0px;
	line-height: 1.2;
}
.contact-btn-a a:hover {
	box-shadow: none !important;
	opacity: 0.7 !important;
	transition: all 0.5s;
}
.contact-btn-b a {
	font-size: min(1.3vw, 16px); !important;
	height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	box-shadow: none !important;
	line-height: 1.2;
}
.contact-btn-b a:hover  {
	box-shadow: none !important;
	opacity: 0.7 !important;
	transition: all 0.5s;
}
.contact-btn-c a {
	font-size: min(1.3vw, 16px) !important;
	height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	box-shadow: none !important;
	line-height: 1.2;
}
.contact-btn-c a:hover {
	box-shadow: none !important;
	opacity: 0.7 !important;
	transition: all 0.5s;
}

/* 親要素（カード全体）のスタイル */
.u-card-link {
    position: relative;
    cursor: pointer;
	height: 100% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	padding: 15px 15px 15px 15px !important;
}

/* ホバー時の演出（お好みで） */
.u-card-link:hover {
	opacity: 0.7 !important;
	transition: all 0.5s;
}

/* クラスをつけたブロックの「中にあるリンク(aタグ)」を拡張する */
.u-stretched-link a::after { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto; /* 明示的にクリックを受け付ける */
    outline : 1px solid #FFFFFF; /* 線の太さ・線状・色 */
    outline-offset : -10px /* どれだけ内側に線を表示したいかを負の値で指定 */
}
.u-stretched-link a { 
    text-decoration: none; !important;
	font-weight: bold; !important;
	color: #fff;
	line-height: 1.2;
}

.contactform-area {
	width:100% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.contactform-btn-title { 
	font-size: min(3vw, 40px) !important;
	line-height: 1.2;
	font-weight: bold; !important;
	color: #fff;
}
.contactform-btn-subtitle { 
	font-size: min(2vw, 36px) !important;
	line-height: 1.2;
	font-weight: bold; !important;
	color: #fff;
}
.contactform-btn-text { 
	font-size: 16px!important;
	line-height: 1.2;
	color: #fff;
	padding: 5px 0px 5px 0px;
}
.contactform-btn-title-2 { 
	font-size: 28px !important;
	line-height: 1.2;
	font-weight: bold; !important;
	color: #fff;
}
.contactform-btn-subtitle-2 { 
	font-size: 20px !important;
	line-height: 1.2;
	font-weight: bold; !important;
	color: #fff;
}

@media screen and (max-width: 959px) {
.contactform-btn-title-2 { 
	font-size: 24px !important;
}
}

@media screen and (max-width: 599px) {
.contactform-btn-title { 
	font-size: 20px !important;
}
.contactform-btn-title-2 { 
	font-size: 20px !important;
}
.contactform-btn-subtitle { 
	font-size: 18px !important;
}
.contactform-btn-subtitle-2 { 
	font-size: 18px !important;
}
}




/* 親要素（カード全体）のスタイル */
.u-card-link-footer {
    position: relative;
    cursor: pointer;
	height: 100% !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	padding: 10px 10px 10px 10px !important;
}
/* ホバー時の演出（お好みで） */
.u-card-link-footer:hover {
	opacity: 0.7 !important;
	transition: all 0.5s;
}
/* クラスをつけたブロックの「中にあるリンク(aタグ)」を拡張する */
.u-stretched-link-footer a::after { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto; /* 明示的にクリックを受け付ける */
    outline : 1px solid #FFFFFF; /* 線の太さ・線状・色 */
    outline-offset : -5px; /* どれだけ内側に線を表示したいかを負の値で指定 */
}
.u-stretched-link-footer a { 
    text-decoration: none !important;
	font-size: 22px !important;
	font-weight: bold !important;
	color: #fff !important;
	line-height: 1.3 !important;
}
.u-stretched-link-footer-2 a::after { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto; /* 明示的にクリックを受け付ける */
    outline : 1px solid #FFFFFF; /* 線の太さ・線状・色 */
    outline-offset : -5px; /* どれだけ内側に線を表示したいかを負の値で指定 */
}
.u-stretched-link-footer-2 a { 
    text-decoration: none !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #fff;
	line-height: 1.3 !important;
}


@media screen and (max-width: 959px) {
.u-stretched-link-footer a { 
	font-size: 22px !important;
}
.u-stretched-link-footer-2 a { 
	font-size: 20px !important;
}
}

@media screen and (max-width: 599px) {
.u-stretched-link-footer a { 
	font-size: 18px !important;
}
.u-stretched-link-footer-2 a { 
	font-size: 16px !important;
}
}

/*　改行**************************************************************/
/* デフォルトは非表示 */
.sp-only { display: none; }
.tb-only { display: none; }

/* スマホのみ表示 */
@media screen and (min-width: 600px) and (max-width: 960px) {
    .tb-only { display: inline; }
}
/* スマホのみ表示 */
@media screen and (max-width: 600px) {
    .sp-only { display: inline; }
}