@charset "UTF-8";

  /* 全体リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px; /* 基本フォントサイズ */
    background-color: #ffffff;
    letter-spacing: 2px;
    color: #434343;
}

/* SP版でのみ改行を有効化 */
.sp-br {
    display: none;
}
@media screen and (max-width: 768px) {
    .sp-br {
        display: inline;
    }
}

/* 共通スタイル */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
}

/* ロゴ */
header .logo img {
    height: px;
    margin-left: 50px;
}

/* 問い合わせセクション（PC版） */
.contact {
    display: flex;
    align-items: center;
    gap: 20px;
}

.info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.item a {
    text-decoration: none;
    color: inherit;
}

.icon {
    width: 20px;
    height: 20px;
}

/* 問い合わせボタン */
.contact-btn {
    height: 70px;
    padding: 0 15px;
    background-color: #C31B1F;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* ロゴのスタイル */
.logo-img {
    max-width: 150px;
    margin-left: 25px;
}

/* SP版スタイル */
@media screen and (max-width: 768px) {
    header {
        height: 70px;
    }

    header .logo img {
        height: 30px;
        margin-left: 25px;
    }

    .contact .info {
        display: none; /* 電話番号とFAXを非表示 */
    }

    .contact-btn {
        height: 70px;
        padding: 0 10px;
        font-size: 14px;
    }
}

/* メインビジュアルの全体設定 */
.main-visual {
    position: relative;
    width: 100%;
    margin-top: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    overflow: hidden;
}

/* 画像共通 */
.main-visual img {
    width: 100%;
    height: auto; /* 画像のアスペクト比を保つ */
    display: block;
}

/* PC用画像は表示、SP用は非表示 */
.main-visual .desktop {
    display: block;
}

.main-visual .mobile {
    display: none;
}

/* SP版スタイル */
@media screen and (max-width: 768px) {
    .main-visual {
        margin-top: 70px;
        justify-content: center;
    }
    /* PC用画像は非表示 */
    .main-visual .desktop {
        display: none;
    }
    /* SP用画像は表示 */
    .main-visual .mobile {
        display: block;
    }
}

.container {
    display: flex;
    align-items: center;
    font-size: 24px;
}
.item {
    padding: 0 15px;
}
.separator {
    border-left: 1px solid #434343;
    height: 20px;
}

/* スライダー全体 */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* スライドのラッパー */
.slider-wrapper {
    display: flex;
    animation: slide 30s linear infinite; /* アニメーション時間を調整 */
    width: calc(200%); /* コンテンツ全体の幅 */
}

/* 各スライド */
.slider-slide {
    flex: 0 0 auto;
    margin-right: 25px; /* スライド間の余白 */
}

.slider-slide img {
    width: auto;
    height: 100px;
}

/* スライダーアニメーション */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* スライドの半分だけ動かす */
    }
}


/* problemセクション全体 */
.problem {
    margin: 0 auto;                   /* セクションを中央寄せ */
    display: flex;                    /* フレックスボックスでレイアウト */
    flex-direction: column;           /* アイテムを縦に並べる */
    justify-content: center;          /* 中央揃え（縦方向） */
    align-items: center;              /* 中央揃え（横方向） */
    text-align: center;               /* テキスト中央揃え */
    background-color: #ffffff;        /* 背景色 */
    padding: 100px 200px;
}

.problem .content{
    width: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* ドロップシャドウ */
}

/* セクションタイトル */
.problem .title {
    padding: 20px 0;                  /* 上下20pxの余白 */
    background-color: #C31B1F;
    width: 100%;
    color: #ffffff;
    border-top-left-radius: 10px;     /* 左上角を角丸10px */
    border-top-right-radius: 10px;    /* 右上角を角丸10px */
    letter-spacing: 2px;
}

/* 各アイテムのコンテンツ */
.problem .item {
    width: 100%;
    display: flex;
    flex-direction: column;           /* アイテムを縦に並べる */
    padding: 50px;                    /* 内部に上下左右50pxの余白 */
    position: relative;               /* イラストの配置用 */
    background-color: #ffffff;      /* 背景色 */
    align-items: flex-start;          /* 中身を左揃え */
    
}

/* アイコンの配置 */
.problem .item .item-content {
    display: flex;                    /* アイコンとテキストを横並びに */
    align-items: center;              /* アイコンとテキストを縦中央揃え */
    margin-bottom: 10px;              /* アイテム間のスペース */
}

.problem .item .icon {
    margin-right: 10px;               /* アイコンとテキスト間のスペース */
}

.problem .item .icon img {
    width: 20px;                      /* アイコンの幅 */
    height: 20px;                     /* アイコンの高さ */
}

/* 各テキスト */
.problem .item p {
    margin: 0;                         /* pタグの余白を削除 */
    text-align: left;
}

/* SP版スタイル */
@media screen and (max-width: 768px) {
    .problem{
        padding: 100px 25px;
    }
    .problem .title h2{
        font-size: 24px;
    }
    .problem .item{
        padding: 25px;
    }
}

/* -----------------------------
  セクション全体
------------------------------ */
.about {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px;
    background-color: #FBF5F0;
}

/* タイトル */
.about .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.about .title h2 {
    color: #000000;
    margin: 0;
    font-size: 40px;
    font-weight: bold;
    display: inline-block;
    padding: 0 10px 25px;
    letter-spacing: 2px;
}

.about .title p {
    color: #000000;
    font-size: 16px;
    line-height: 2;
}

/* 概念図エリア（about-img） */
.about .about-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.about .about-img img.desktop {
    display: inline-block;
    width: 100%;
    height: auto;
}

.about .about-img img.mobile {
    display: none;
    width: 100%;
    height: auto;
}

/* 特徴01, 02 */
.about .feature01,
.about .feature02 {
    background-color: #ffffff;
    padding: 50px;
    margin-top: 80px;
    max-width: 1200px;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
}

/* 特徴ラベル部分（最初のp） */
.about .feature01 > p:first-child,
.about .feature02 > p:first-child {
    display: inline-block;
    background-color: #F8EEE5;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 999px;
    margin-bottom: 20px;
}

/* 特徴パート全体：左揃えに変更 */
.about .feature01,
.about .feature02 {
    background-color: #ffffff;
    padding: 50px;
    text-align: left;
    border-radius: 8px;
    box-sizing: border-box;
}


/* サブタイトル */
.about .feature01 h3,
.about .feature02 h3 {
    font-size: 24px;
    color: #000;
    margin-bottom: 20px;
}

/* 説明文 */
.about .feature01 p:not(:first-child),
.about .feature02 p:not(:first-child) {
    font-size: 16px;
    line-height: 2;
    color: #000000;
}

/* 特徴画像 */
.about .feature-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

.about .feature-img img.desktop {
    display: inline-block;
    width: 100%;
    height: auto;
}

.about .feature-img img.mobile {
    display: none;
    width: 100%;
    height: auto;
}

/* -----------------------------
  レスポンシブ対応
------------------------------ */
@media (max-width: 768px) {
    .about {
        padding: 50px 20px;
    }

    .about .feature01,
    .about .feature02 {
        padding: 30px 20px;
    }

    .about .about-img img.desktop,
    .about .feature-img img.desktop {
        display: none;
    }

    .about .about-img img.mobile,
    .about .feature-img img.mobile {
        display: inline-block;
    }

    .about .about-img,
    .about .feature-img {
        flex-direction: column;
        margin-top: 30px;
    }
}

footer{
    background-color: #C31B1F;
    padding: 50px 100px;
    color: #ffffff;
    text-align: right;
}

footer > div{
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    justify-content: flex-end;
}

footer .link > a{
    color: #ffffff;
    text-decoration: none;
}

/* SP版（縦並び） */
@media screen and (max-width: 768px) {
    footer{
        padding: 100px 25px;
    }
    footer > div{
        justify-content: center;
    }
}

/* お問い合わせ導線 */
.contact01{
    margin: 0 auto;                   /* セクションを中央寄せ */
    display: flex;                    /* フレックスボックスでレイアウト */
    flex-direction: column;           /* アイテムを縦に並べる */
    justify-content: center;          /* 中央揃え（縦方向） */
    align-items: center;              /* 中央揃え（横方向） */
    text-align: center;               /* テキスト中央揃え */
    padding: 50px 0px;
    background-color: #C31B1F;
}

.contact01 p{
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 25px;
}

.contact01 > a{
    background-color: #FFB602;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* ドロップシャドウ */
    text-decoration: none;
}

.contact01 > a p{
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 0px;
}

.contact02{
    margin: 0 auto;                   /* セクションを中央寄せ */
    display: flex;                    /* フレックスボックスでレイアウト */
    flex-direction: column;           /* アイテムを縦に並べる */
    justify-content: center;          /* 中央揃え（縦方向） */
    align-items: center;              /* 中央揃え（横方向） */
    text-align: center;               /* テキスト中央揃え */
    padding: 50px 0px;
    background-color: #C31B1F;
}

.contact02 p{
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
}

.contact02 > a{
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* ドロップシャドウ */
    text-decoration: none;
}

.contact02 > a p{
    color: #C31B1F;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 0px;
}

/* contact
-------------------------------------------------------*/

.bg_blue {
	background: #21a4b8;
}

.main_ttl01.bg_blue {
	color: #fff;
	font-size: 32px;
    text-align: center;
}

section#contact {
	background: #ffffff;
}

.tc a {
	color: #0A15D4;
	text-decoration: underline;
}

/*CSS移植*/

/*
02.table
---------------------------------------------------------------------------------------*/
section#contact table {
	table-layout: fixed;
	margin: 0 auto 40px;
	box-sizing: border-box;
	width: 100%;
}

section#contact table.form {
	max-width: 800px;
}

section#contact table th,
section#contact table td {
	border: solid 1px rgb(244, 244, 244);
	font-size: 16px;
	padding: 20px;
	background-color: rgb(255, 255, 255);
}

section#contact table th {
	text-align: center;
	width: 25%;
	background-color: #21a4b8;
	color: rgb(255, 255, 255);
}

section#contact table td.must,
section#contact table td.nini {
	width: 10%;
	text-align: center;
}

section#contact table td.must {
	background-color: rgb(255, 255, 0);
}

section#contact table td.nini {
	background-color: rgb(243, 243, 243);
}

section#contact table td input,
section#contact table td textarea {
	width: 98%;
	border: solid 1px rgb(0, 0, 0);
	box-sizing: border-box;
	padding: 10px;
	-moz-transition: width .3s;
	-webkit-transition: width .3s;
	-o-transition: width .3s;
	-ms-transition: width .3s;
	transition: width .3s;
	background-color: rgb(255, 255, 255);
}

section#contact table td select,
section#contact table td option {
	border: solid 1px rgb(0, 0, 0);
	border-radius: 0;
	padding: 10px;
	width: 98%;
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
}

section#contact table td input:focus,
section#contact table td textarea:focus,
section#contact table td select:focus {
	border: solid 1px rgb(246, 82, 82);
	outline: none;
	width: 100%;
	background-color: rgba(246, 82, 82, 0.2);
}

section#contact table td span.wrap {
	position: relative;
}

section#contact table td span.wrap::after {
	content: "▼";
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -12px;
}

section#contact .contact .link:not(.off):hover input {
	cursor: pointer;
}

section#contact .contact .link.off {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

section#contact .contact .link.off:hover input {
	opacity: 1;
	filter: alpha(opacity=100);
}

section#contact .contact .link.off input {
	cursor: default;
}

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

	section#contact table th,
	section#contact table td {
		font-size: 1rem;
		padding: 10px;
	}

	section#contact table th {

		width: 20%;
	}


}

/*//CSS移植*/

#contact.area {
	padding: 0px;
	padding-bottom: 100px;
    text-align: center;
    margin-top: 100px;
}

#contact .inner {
	max-width: 100%;
}

#contact .ttl_en img {
	max-width: 209px;
}

#contact .info_box {
	margin: 0 auto 70px;
	background-color: #f3f3f3;
	padding: 40px 20px;
}

#contact .info_box .tel {
	text-align: center;
	margin: 0 0 20px;
}

#contact .info_box .tel a img {
	max-width: 305px;
}

#contact .info_box .tel span {
	font-size: 1.4rem;
	margin: 0 0 0 10px;
}

#contact .info_box dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

#contact .info_box dl dt {
	font-size: 1.4rem;
	line-height: 2.2;
	margin: 0 50px 0 0;
}

#contact .info_box dl dd img {
	max-width: 120px;
}

#contact .top_txt {
	text-align: center;
	font-size: 2rem;
	letter-spacing: 0.1em;
	margin: 0 0 40px;
}

#contact .table_temp {
	width: 100%;
	font-size: 1.4rem;
}

#contact.contact_after {
	padding: 0px;
	padding-bottom: 50px;
}

#contact tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

#contact tr>* {
	display: table-cell;
	vertical-align: middle;
	padding: 20px 10px;
	box-sizing: border-box;
	line-height: 1;
}

#contact tr th {
	width: 20%;
	text-align: left;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

#contact tr th b {
	display: block;
	position: relative;
	font-weight: normal;
}

#contact tr.hissu th b::after,
#contact tr.nini th b::after {
	color: #fff;
	font-weight: 500;
	font-size: 1.2rem;
	width: 5%;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#contact tr.hissu th b::after {
	content: "必須";
	background: #aa0726;
}

#contact tr.nini th b::after {
	content: "任意";
	background: #5e5e5e;
}

#contact.contact_after tr {
	border-bottom: 1px solid #ccc;
}

#contact.contact_after tr:first-child {
	border-top: 1px solid #ccc;
	margin: 30px 0 0;
}

#contact.contact_after tr td {
	font-weight: 500;
}

.txt_form .red,
.error_messe b {
	color: #f00;
	font-weight: normal;
}

.error_messe {
	margin: 20px 0 0;
	text-align: center;
	line-height: 1.3;
}

.error_messe>* {
	display: inline-block;
}

#contact input[type="text"],
#contact select,
#contact textarea {
	width: 100%;
	background-color: #fff;
	border: 1px solid #000;
}

#contact input[type="text"],
#contact select {
	height: 40px;
}

#contact textarea {
	min-height: 150px;
	resize: vertical;
}

#contact .radio_area label,
#contact .check_area label {
	display: inline-block;
	margin: 5px 5px 5px 0;
	line-height: 1.3;
}

#contact .txt_form {
	text-align: center;
	line-height: 1.3;
}

#contact .txt_form span {
	display: block;
}

::placeholder {
	color: #ccc;
}

#contact .form_btn {
	display: flex;
	flex-flow: row-reverse nowrap;
	align-items: center;
	justify-content: space-evenly;
}

#contact .form_btn01,
#contact .form_btn02 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	max-width: 250px;
	height: 60px;
	border: none;
	padding: 10px;
	margin: 30px auto 0;
	box-sizing: border-box;
	color: #fff;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.1rem;
	border-radius: 100px;
}

#contact .form_btn01 {
	background: #C31B1F;
}

#contact .form_btn02 {
	background: #333;
}

/* table_temp end */
@media screen and (max-width:768px) {

	.main_ttl01.bg_blue {
		color: #fff;
		padding: 20px 20px 20px 20px;
		font-size: 1.8rem;
	}



	#contact.area {
		padding: 20px 20px 50px;
	}

	#contact.contact_after {
		padding: 20px 20px 50px;
	}

	#contact .ttl_en img {
		max-width: 146px;
	}

	#contact .info_box {
		margin: 0 auto 40px;
		padding: 30px 20px;
	}

	#contact .info_box .tel {
		text-align: center;
		margin: 0 0 20px;
	}

	#contact .info_box .tel a img {
		max-width: 305px;
	}

	#contact .info_box .tel span {
		display: block;
		margin: 10px 0 0;
	}

	#contact .info_box dl {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}

	#contact .info_box dl dt {
		font-size: 1.4rem;
		line-height: 2;
		margin: 0 0 20px;
	}

	#contact .info_box dl dd img {
		max-width: 100px;
	}

	#contact .top_txt {
		font-size: 1.8rem;
		margin: 0 0 30px;
	}

	/* table_temp start */
	#contact.contact_after tr:first-child {
		margin: 20px 0 0;
	}

	#contact tr>* {
		padding: 15px 0;
		line-height: 1.3;
	}

	#contact tr th {
		width: 100%;
		font-size: 100%;
	}

	#contact tr td {
		padding-top: 0;
	}

	#contact tr.hissu th b::after,
	#contact tr.nini th b::after {
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
	}

	#contact .radio_area label,
	#contact .check_area label {
		display: flex;
		align-items: center;
	}

	#contact .form_btn {
		flex-flow: column;
	}

	#contact .form_btn01,
	#contact .form_btn02 {
		margin: 20px 0 0;
		font-size: 100%;
		height: 50px;
	}

	/* table_temp end */
}


/* お問い合わせタイトルの装飾 */
.main_ttl01 {
    background-color: #EE7E32;
    padding: 25px 0;
    position: relative;
    display: inline-block;
    width: 100%;
    color: #ffffff;
    margin-bottom: 50px;
}

.main_ttl01::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #EE7E32;
}

.night {
    margin: 0 auto;                   /* セクションを中央寄せ */
    display: flex;                    /* フレックスボックスでレイアウト */
    flex-direction: column;           /* アイテムを縦に並べる */
    justify-content: center;          /* 中央揃え（縦方向） */
    align-items: center;              /* 中央揃え（横方向） */
    text-align: center;               /* テキスト中央揃え */
    padding: 100px;
    background-color: #fefefe;
    max-width: 1200px;                /* 最大幅を指定し中央寄せを強調 */
}

/* タイトル部分 */
.night .title {
    display: flex;
    flex-direction: column;  /* 縦並びに */
    align-items: center;     /* 中央揃え */
    margin-bottom: 50px;
}

.night .title h2 {
    color: #434343;
    margin: 0;               /* 余白をリセット */
    margin-bottom: 25px;      /* 下に25pxの余白を追加 */
    font-size: 40px;
    font-weight: bold;
    display: inline-block;    /* 文字幅に合わせて横幅を決める */
    padding: 0 10px;          /* 文字の左右に少し余白を追加 */
    letter-spacing: 2px;
    line-height: 1.2;
}

.night .title p {
    color: #434343;
    font-size: 20px;
    line-height: 2; /* 行間の調整 */
    max-width: 700px; /* 読みやすい横幅制限 */
}

/* 画像部分 */
.night .about-img {
    width: 100%;
    max-width: 800px;
}

/* PC用画像 */
.night .about-img .desktop {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ用画像はデフォルト非表示 */
.night .about-img .mobile {
    display: none;
    width: 100%;
    height: auto;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .night {
        padding: 50px 20px;
    }
    .night .title h2 {
        font-size: 28px;
        padding: 0 5px;
    }
    .night .title p {
        font-size: 16px;
        max-width: 100%;
    }
    .night .about-img .desktop {
        display: none;
    }
    .night .about-img .mobile {
        display: block;
    }
}



.fukidashi,
.fukidashi2 {
    width: 100%;
}

.fukidashi img.desktop,
.fukidashi2 img.desktop{
    display: block;
    width: 100%;
    height: auto;
}

.fukidashi img.mobile,
.fukidashi2 img.mobile{
    display: none;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .fukidashi img.desktop,
    .fukidashi2 img.desktop {
        display: none;
    }
    .fukidashi img.mobile,
    .fukidashi2 img.mobile {
        display: block;
        width: 100%;
    }
}