@charset "UTF-8";

/*
==================================================

   ちょっと更新

==================================================
*/



/*
==================================================
  基本設定
==================================================
*/

/* ----- 基本 ----- */
html {
font-size: 100%;
}

/* ----- 背景・テキスト ----- */
body {
min-width: 1000px;
background: #ffffff;
font-size: 1rem;
font-family: sans-serif;
color: #2a2a2a;
}

/* ----- リンクテキスト ----- */
a:link { color: #3366ff; }
a:visited { color: #336699; }
a:hover { color: #cc0000; }
a:active { color: #cc0000; }

/* ----- 全要素 ----- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
word-break: break-all;
}

/* ----- 文字スタイル ----- */
em,
dfn {
font-weight: bold;
font-style: normal;
}

/* ----- PRE ----- */
pre {
font-family: sans-serif;
white-space: pre-wrap;
}

/* ----- 折り返し禁止 ----- */
span.nowrap {
white-space: nowrap;
}

/* ----- 画像の伸縮 ----- */
img {
max-width: 100%;
height: auto;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

body {
min-width: 0;
}

}
/* ----- /899 ----- */



/*
==================================================
  レイアウト
==================================================
*/

div.limit {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

div.limit {
padding: 0 10px;
}

}
/* ----- /899 ----- */



/*
==================================================
  ヘッダ
==================================================
*/

#header {
padding: 10px 0 20px;
border-top: 5px #f76500 solid;
text-align: center;
}

#header div.lead {
display: inline-block;
text-box: trim-both cap alphabetic;
margin: 0 0 10px;
padding: 7px 20px;
background: #19b2e5;
border-radius: 12px;
font-size: 0.9rem;
font-weight: bold;
color: #ffffff;
line-height: 1.6;
}

#header div.cover {
margin: 0 0 30px;
padding: 40px 0;
background: #e3f0fb;
}

#header h1 {
margin: 0 0 30px;
}

#header pre {
font-size: 1.4rem;
font-weight: bold;
line-height: 2;
}
#header pre b {
font-size: 1.8rem;
color: #1466b7;
}

#header div.appeal {
margin: 0 0 50px;
}
#header div.appeal ul {
display: flex;
column-gap: 30px;
justify-content: center;
list-style-type: none;
}
#header div.appeal ul li {
width: 12em;
text-box: trim-both cap alphabetic;
padding: 17px 10px;
background: #1466b7;
border-radius: 12px;
font-size: 1.4rem;
font-weight: bold;
color: #ffffff;
line-height: 1.6;
}

#header nav ul {
display: flex;
column-gap: 30px;
justify-content: center;
list-style-type: none;
}
#header nav ul li a {
font-weight: bold;
color: #2a2a2a;
text-decoration: none;
}
#header nav ul li a:hover {
text-decoration: underline;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#header {
padding: 10px 0 10px;
border-top: 3px #f76500 solid;
}

#header div.lead {
margin: 0 10px 10px;
padding: 15px 10px;
font-size: 13px;
line-height: 1.8;
}

#header div.cover {
padding: 40px 10px 30px;
}

#header h1 {
width: 280px;
margin: 0 auto 25px;
}

#header pre {
font-size: 1.1rem;
font-size: 16px;
line-height: 2.4;
}
#header pre b {
display: block;
font-size: 24px;
}

#header div.appeal {
margin: 0 0 50px;
}
#header div.appeal ul {
display: block;
}
#header div.appeal ul li {
width: 14em;
margin: 0 auto 10px;
padding: 15px 10px;
font-size: 1.2rem;
}

#header nav ul {
max-width: 500px;
column-gap: 0;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
#header nav ul li {
width: 50%;
margin: 0 0 25px;
}
#header nav ul li a:hover {
text-decoration: none;
}

}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

/* ----- セクション共通 ----- */
#content > section {
padding: 100px 0;
text-align: center;
}

#content section hgroup {
margin: 0 0 60px;
}
#content section hgroup h2 {
margin: 0 0 15px;
font-size: 1rem;
color: #f76500;
}
#content section hgroup p {
font-size: 2.2rem;
font-weight: bold;
line-height: 1.4;
}

#content section div.narrow {
width: 900px;
margin: 0 auto;
}
#content section div.narrow.text {
text-align: left;
}

#content section p {
margin: 0 0 1em;
line-height: 2;
}

#content section p.note {
margin: 0.5em 0 0;
font-size: 0.9rem;
color: #757575;
line-height: 1.6;
}

#content section ul {
margin: 0 0 0 1em;
}
#content section ul li {
line-height: 1.8;
}

/* ----- テーブル共通 ----- */
#content table {
width: 100%;
background: #ffffff;
border-collapse: collapse;
border-top: 1px #7f7f7f solid;
border-bottom: 1px #7f7f7f solid;
text-align: left;
}
#content table tr {
border-bottom: 1px #c0c0c0 solid;
}
#content table tr:last-child {
border-bottom: none;
}
#content table th,
#content table td {
padding: 20px;
font-size: 1rem;
vertical-align: top;
line-height: 1.8;
}
#content table th {
text-align: left;
}
#content table td ul {
margin: 0;
list-style-type: none;
}
#content table td ul li {
line-height: 1.8;
}

/* ----- サービスの特徴 ----- */
#features {
background: #f5f5f5;
}

#features div.wrap {
display: flex;
justify-content: space-between;
}

#features section {
width: 310px;
padding: 40px 20px 30px;
background: #ffffff;
border: 1px #7f7f7f solid;
}
#features section h3 {
margin: 0 0 30px;
padding: 0 0 30px;
border-bottom: 4px #1466b7 dotted;
font-size: 1.3rem;
color: #1466b7;
}
#features section p {
text-align: left;
line-height: 2;
}

/* ----- 作業料金 ----- */
#price {

}

#price table {
margin: 0 0 60px;
}
#price table colgroup.item {
width: 15em;
}
#price table colgroup.price {
width: 12em;
background: #f5f5f5;
}
#price table td:nth-of-type(1) {
text-align: center;
}
#price table td b {
color: #e51919;
}

/* ----- 作業の流れ ----- */
#flow {
background: #f5f5f5;
}

#flow ol {
margin: 0 0 60px;
list-style-type: none;
}
#flow ol li {
position: relative;
margin: 0 0 0 42px;
padding: 0 0 50px;
border-left: 6px #c0c0c0 dotted;
}
#flow ol li:last-child {
padding: 0;
border-left-color: transparent;
}
#flow ol li div {
position: absolute;
top: 0;
left: -49px;
width: 90px;
height: 90px;
padding: 14px 0 0;
background: #1466b7;
border: 3px #ffffff solid;
border-radius: 50%;
font-size: 14px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
z-index: 1;
}
#flow ol li div span {
display: block;
margin: 2px 0 0;
font-size: 36px;
font-weight: bold;
}
#flow ol dl {
margin: 0 0 0 90px;
padding: 30px 35px;
background: #ffffff;
border-radius: 10px;
text-align: left;
}
#flow ol dl dt {
margin: 0 0 20px;
padding: 0 0 10px;
border-bottom: 1px #c0c0c0 solid;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.4;
}
#flow ol dl dd {

}
#flow ol dl dd p {
line-height: 2;
}

/* ----- よくあるご質問 ----- */
#faq {

}

#faq ul.faq {
margin: 0 0 60px;
text-align: left;
list-style-type: none;
}
#faq ul.faq li {
margin: 0 0 20px;
}
/* 質問部分 */
#faq ul.faq li dt button {
display: flex;
align-items: center;
width: 100%;
padding: 10px 30px 8px;
background: #f5f5f5;
border: 1px #c0c0c0 solid;
border-radius: 5px;
cursor: pointer;
transition: 0.1s;
}
#faq ul.faq li dt span {
display: inline-block;
width: 45px;
height: 45px;
background: #1466b7;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-align: center;
line-height: 45px;
}
#faq ul.faq li dt b {
flex: 1;
display: inline-block;
margin: 2px 20px 0;
font-size: 1.2rem;
text-align: left;
line-height: 1.6;
}
/* 矢印アイコン */
#faq ul.faq li dt i.open-arrow {
display: inline-block;
position: relative;
margin: 0 0 0 auto;
width: 40px;
height: 40px;
background: #ffffff;
border: 1px #e5e5e5 solid;
border-radius: 50%;
}
#faq ul.faq li dt i.open-arrow::before {
content: '';
position: absolute;
top: 0;
bottom: 3px;
right: 14px;
width: 10px;
height: 10px;
margin: auto;
border-top: 2px #1466b7 solid;
border-right: 2px #1466b7 solid;
transform: rotate(135deg);
transition: 0.4s;
}
#faq ul.faq li dt button[aria-expanded='true'] i.open-arrow::before {
top: 3px;
bottom: 0;
transform: rotate(-45deg);
}
/* 回答部分 */
#faq ul.faq li dd {
display: flex;
height: auto;
padding: 30px 30px;
overflow: hidden;
opacity: 1;
transition: 0.2s ease-out;
}
#faq ul.faq li dd.close,
#faq ul.faq li dd[hidden] {
/*
デフォルトでclass="close"をセットして回答部分を閉じる
JavaScriptでhidden="until-found"を追加した後にclass="close"を削除
（デフォルトでhiddenをセットしてしまうと、スクリプトオフ時に回答部分が表示できないため）
*/
height: 0;
padding: 0 30px;
opacity: 0;
}
#faq ul.faq li dd span {
display: inline-block;
width: 50px;
font-size: 30px;
font-weight: bold;
color: #ff0000;
text-align: center;
}
#faq ul.faq li dd div {
flex: 1;
margin: 0 0 0 18px;
}
#faq ul.faq li dd div p {
margin: 0 0 3px;
line-height: 2;
}
#faq ul.faq li dd div p:last-child {
margin: 0;
}
/* スクリプトオフ時 */
.no-js #faq ul.faq li dt button {
cursor: default;
}
.no-js #faq ul.faq li dt i.open-arrow {
display: none;
}
.no-js #faq ul.faq li dd.close {
height: auto;
padding: 30px 30px;
opacity: 1;
}

/* ----- 事業者情報 ----- */
#about {
background: #f5f5f5;
}

#about table colgroup.item {
width: 15em;
}

/* ----- お問い合わせ ----- */
#contact {

}

#content #contact div.narrow {
margin: 0 auto 30px;
}
#content #contact div.narrow p {
margin: 0;
}

#contact table {
margin: 0 0 20px;
}
#contact table colgroup.item {
width: 17em;
background: #f5f5f5;
}
#contact table th {
position: relative;
}
#contact table td p {
margin: 15px 0 0;
font-size: 1rem;
line-height: 1.6;
}
#contact table td ul li {
margin: 0 0 15px;
}
#contact table td ul li:last-child {
margin: 0;
}
/* 必須・任意マーク */
#contact table th strong,
#contact table th span {
position: absolute;
right: 15px;
display: inline-block;
margin: 0.2rem 0 0;
padding: 5px 8px 3px;
font-size: 0.85rem;
font-weight: normal;
color: #ffffff;
}
#contact table th strong {
background: #ea4747;
}
#contact table th span {
background: #a8a8a8;
}

/* ----- フォーム部品 ----- */
#contact form input[type="text"],
#contact form input[type="email"],
#contact form input[type="tel"],
#contact form input[type="url"],
#contact form textarea,
#contact form select {
border: 2px #7f7f7f solid;
border-radius: 6px;
font-size: 1rem;
font-family: 'NotoSansJP-Reg', sans-serif;
}

#contact form input[type="text"],
#contact form input[type="email"],
#contact form input[type="tel"],
#contact form input[type="url"] {
width: 100%;
padding: 7px;
}
#contact form input::placeholder,
#contact form textarea::placeholder {
color: #afafaf;
}

#contact form textarea {
display: block;
width: 100%;
height: 18em;
resize: vertical;
padding: 7px;
line-height: 1.4;
}

#contact form input[type="checkbox"],
#contact form input[type="radio"] {
transform: scale(1.3);
margin: 0 10px 0 0;
}

#contact form div.privacy {
margin: 0 0 20px;
padding: 20px;
border: 1px #c0c0c0 solid;
font-size: 0.9rem;
text-align: center;
}
#contact form div.privacy p {
margin: 0;
}
#contact form div.privacy p.agree {
margin: 0 0 10px;
}

/* CGIの入力内容確認と共有 */
#contact form div.submit,
#check form div.submit {
text-align: center;
}
#contact form div.submit input,
#check form div.submit input {
padding: 25px 70px;
background: #1466b7;
border: none;
border-radius: 10px;
font-size: 1.3rem;
font-weight: bold;
color: #ffffff;
cursor: pointer;
}
#contact form div.submit input:hover,
#check form div.submit input:hover {
background: #f76500;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- セクション共通 ----- */
#content > section {
padding: 60px 0;
}

#content section hgroup {
margin: 0 0 40px;
}
#content section hgroup p {
font-size: 1.2rem;
line-height: 1.6;
}

#content section div.narrow {
width: auto;
max-width: 600px;
margin: 0 auto;
}

/* ----- テーブル共通 ----- */
#content table {
max-width: 600px;
margin: 0 auto;
}
#content table th,
#content table td {
display: block;
}
#content table th {
padding: 15px 15px;
background: #1466b7;
color: #ffffff;
}
#content table td {
padding: 20px 15px;
}

/* ----- サービスの特徴 ----- */
#features div.wrap {
display: block;
}

#features section {
width: auto;
max-width: 600px;
margin: 0 auto 30px;
padding: 30px 15px 20px;
}
#features section h3 {
margin: 0 0 20px;
padding: 0 0 20px;
font-size: 1.2rem;
}

/* ----- 作業料金 ----- */
#price table {
margin: 0 auto 40px;
}
#price table colgroup.item {
width: auto;
}
#price table colgroup.price {
width: auto;
}
#price table td:nth-of-type(1) {
background: #f5f5f5;
text-align: left;
}
#price table td b {
font-size: 1.3rem;
}

/* ----- 作業の流れ ----- */
#flow ol {
max-width: 600px;
margin: 0 auto 40px;
}
#flow ol li {
margin: 0;
padding: 0 0 35px;
border-left: none;
}

#flow ol li div {
top: -20px;
left: 3px;
width: 55px;
height: 55px;
padding: 8px 0 0;
font-size: 10px;
}
#flow ol li div span {
margin: 1px 0 0;
font-size: 20px;
}
#flow ol dl {
margin: 0;
padding: 45px 15px 25px;
}
#flow ol dl dt {
margin: 0 0 15px;
padding: 0 0 7px;
font-size: 1.2rem;
line-height: 1.6;
}

/* ----- よくあるご質問 ----- */
#faq ul.faq {
margin: 0 0 40px;
}
/* 質問部分 */
#faq ul.faq li dt button {
padding: 10px 10px 9px;
}
#faq ul.faq li dt span {
width: 32px;
height: 32px;
font-size: 16px;
line-height: 32px;
}
#faq ul.faq li dt b {
margin: 2px 10px 0;
font-size: 1rem;
line-height: 1.5;
}
/* 矢印アイコン */
#faq ul.faq li dt i.open-arrow {
width: 32px;
height: 32px;
}
#faq ul.faq li dt i.open-arrow::before {
bottom: 3px;
right: 11px;
width: 8px;
height: 8px;
}
/* 回答部分 */
#faq ul.faq li dd {
padding: 20px 10px;
}
#faq ul.faq li dd.close,
#faq ul.faq li dd[hidden] {
padding: 0 10px;
}
#faq ul.faq li dd span {
width: 30px;
font-size: 20px;
line-height: 1.4;
}
#faq ul.faq li dd div {
margin: 0;
}
#faq ul.faq li dd div p {
font-size: 1rem;
}
/* スクリプトオフ時 */
.no-js #faq ul.faq li dd.close {
padding: 20px 10px;
}

/* ----- 事業者情報 ----- */
#about table colgroup.item {
width: auto;
}

/* ----- お問い合わせ ----- */
#contact table {
margin: 0 auto 20px;
}
#contact table colgroup.item {
width: auto;
}
#contact table td {
background: #f5f5f5;
}

#contact form textarea {
height: 15em;
}

#contact form div.privacy {
max-width: 600px;
margin: 0 auto 20px;
padding: 20px 15px;
}

#contact form div.submit input,
#check form div.submit input {
padding: 25px 50px;
font-size: 1.1rem;
}
#contact form div.submit input:hover,
#check form div.submit input:hover {
background: #1466b7;
}

}
/* ----- /899 ----- */



/*
==================================================
  フッタ
==================================================
*/

#footer {
padding: 30px 0 50px;
text-align: center;
}

#footer nav {
margin: 0 0 30px;
}

#footer nav ul {
display: flex;
column-gap: 30px;
justify-content: center;
list-style-type: none;
}
#footer nav ul li a {
color: #2a2a2a;
text-decoration: none;
}
#footer nav ul li a:hover {
text-decoration: underline;
}

#footer div.logo {
margin: 0 0 50px;
}

#footer div.copy small {
font-size: 0.9rem;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#footer {
padding: 30px 0 40px;
}

#footer nav ul {
column-gap: 20px;
font-size: 14px;
}

#footer nav ul li a:hover {
text-decoration: none;
}

#footer div.logo {
width: 200px;
margin: 0 auto 50px;
}

}
/* ----- /899 ----- */



/*
==================================================
  フォームCGI用
==================================================
*/

/* ----- ヘッダ ----- */
#form #header {
padding: 0 0 20px;
}

#form #header div.cover {
margin: 0;
padding: 15px 0;
}

#form #header h1 {
width: 300px;
margin: 0 auto;
}

/* ----- セクション共通 ----- */
#form #content > section {
padding: 70px 0;
}

#form #content section h2 {
margin: 0 0 20px;
font-size: 2.2rem;
line-height: 1.4;
}

#form #content section p {
line-height: 1.8;
}

#form #content section p.back-top {
margin: 50px 0 0;
}

/* ----- 入力内容の確認 ----- */
#content #check {
background: #f5f5f5;
}

#content #check table {
margin: 30px 0 20px;
}
#content #check table colgroup.item {
width: 17em;
}

/* ----- 修正フォーム ----- */
#contact table td.mark {
background: #fceded;
}

/* ----- エラー ----- */
#content #error {
background: #f5f5f5;
}

#content #error ul {
display: inline-block;
margin: 10px 0;
text-align: left;
}
#content #error ul li {
margin: 0 0 10px;
}
#content #error strong {
color: #e51919;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- ヘッダ ----- */
#form #header {
padding: 0 0 10px;
}

#form #header h1 {
width: 280px;
}

/* ----- セクション共通 ----- */
#form #content > section {
padding: 50px 0;
}

#form #content section h2 {
font-size: 1.2rem;
line-height: 1.6;
}

/* ----- 入力内容の確認 ----- */
#content #check table {
margin: 30px auto 20px;
}
#content #check table colgroup.item {
width: auto;
}

/* ----- 修正フォーム ----- */
#contact table td.mark {
background: #fceded;
}

/* ----- エラー ----- */
#content #error {
background: #f5f5f5;
}

#content #error ul {
display: inline-block;
margin: 10px 0;
text-align: left;
}
#content #error ul li {
margin: 0 0 10px;
}
#content #error strong {
color: #e51919;
}

}
/* ----- /899 ----- */