/* トップイメージ
------------------------------------------------------------*/
.topimage {
width: 100%;
margin: 0 auto;
background-color: #fff;
background-image: radial-gradient(#999 30%, transparent 30%);
background-size: 5px 5px;
}
.topimage_bt {
position: relative;
width: 100%;
max-width: 1920px;
aspect-ratio: 192 / 50;
margin: 0 auto;
}
.topimage_bt img {
width: 100%;
max-width: 1920px;
height: auto;
position: absolute;
top: 0;
left: 0;
}
/* パンくず、タイトル
------------------------------------------------------------*/
.pankuzu {
width : 100%;
margin: 0 auto;
padding: 10px 0 10px 10px;
box-sizing: border-box;
font-size: 1.5em;
color: #696969;
}
.pankuzu a {
color: #696969;
}
.con_title {
padding: 20px 0 0 0;
}
.je_midashi {
width: 80%;
max-width: 350px;
margin: 0 auto 50px auto;
}
.je_midashi_j {
width: 100%;
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
text-indent: 2px;
padding: 0 0 10px 0;
box-sizing: border-box;
text-align: center;
}
.je_midashi_e {
font-family: Futura, 'Century Gothic';
font-size: 1.7em;
padding: 10px 0 0 0 ;
box-sizing: border-box;
letter-spacing: 3px;
text-indent: 3px;
text-align: center;
}
.l_dotted_line {
width: 100%;
height: 4px;
background: radial-gradient(circle farthest-side, #b2a8b9, #b2a8b9 50%, transparent 50%, transparent);
background-size: 4px 4px;
background-repeat: repeat-x;
z-index: 3;
pointer-events: none;
position: relative;
}
.kakko {
width: 75%;
max-width: 475px;
height: 80px;
padding: 10px 0;
margin: 0 auto 50px auto;
box-sizing: border-box;
position: relative;
text-align:center;
}
.kakko::before, .kakko::after {
content: '';
width: 25px;
height: 100%;
box-sizing: border-box;
position: absolute;
}
.kakko::before {
border-left: solid 4px #b2a6b9;
border-top: solid 4px #b2a6b9;
border-bottom: solid 4px #b2a6b9;
top: 0;
left: 0;
}
.kakko::after {
border-right: solid 4px #b2a6b9;
border-top: solid 4px #b2a6b9;
border-bottom: solid 4px #b2a6b9;
top: 0;
right: 0;
}
.kakko_n {
width: 75%;
max-width: 300px;
margin: 0 auto;
height: 18px;
font-family: Futura, 'Century Gothic';
font-size: 2.4em;
line-height: 18px;
letter-spacing: 5px;
text-indent: 5px;
padding-bottom: 10px;
border-bottom: 2px solid #b2a6b9;
}
.kakko_t {
width: 100%;
height: 22px;
font-size: 1.5em;
font-weight: bold;
line-height: 22px;
padding-top: 8px;
}
.diagonal2 {
width: 100%;
height: 50px;
background:repeating-linear-gradient(-45deg,#fff,#fff 1px,#b2a8b9 0,#b2a8b9 15px);
margin: 20px auto;
}

/* ボックス共通
------------------------------------------------------------*/
.lav_d_w14 {
height: 90px;
background-color: #b2a8b9;
position: relative;
}
.lav_d_w14_b {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.lav_d_wt14 {
width: 90%;
max-width: 1000px;
height:40px;
background-color: #fff;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
}
.lav_d_w2 {
height: 160px;
background-color: #b2a8b9;
position: relative;
}
.lav_d_wt2 {
width: 90%;
max-width: 1000px;
height:160px;
background-color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
}
.lav_d_title {
width:100%;
max-width: 1000px;
height: 80px;
position: absolute;
top: 30px;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
}
.lav_d_w3 {
background-color: #b2a8b9;
padding: 0;
}
.lav_d_w3_w {
width: 90%;
max-width: 1000px;
margint: 0 auto;
background-color: #fff;
}
.lav_d_w3_w ul {
margin: 10px auto 30px auto;
}
.lav_d_w3_w li {
font-size: 1.5em;
text-align: justify;
text-indent: -1em;
padding-left: 1em;
margin-bottom: 10px;
}
.lav_d_wt4 {
top: 0;
}
.lav_title {
display: inline-block;
background-color: #b2a8b9;
color: #fff;
font-size: 1.8em;
height: 35px;
line-height: 35px;
padding: 0 20px;
border-radius: 5px;
}



/* 品質
------------------------------------------------------------*/
.quality_imabari {
margin: 0 auto 50px auto;
}
.imabari_towel_logo {
width: 70%;
max-width: 175px;
margin: 50px auto 70px auto;
}
.imabari_towel_logo p {
margin: 25px auto 50px auto;
font-size: 1.6em;
}
.imabari_towel_midashi {
font-size: 1.8em;
font-weight: bold;
margin: 0 auto 20px auto;
}
.quality_imabari ul {
margin: 50px auto 0 auto;
}
.quality_imabari  li {
font-size: 1.5em;
padding: 20px 0;
border-bottom: 1px solid #000;
}
.quality_imabari  li:last-child {
border: 0;
}
.craftsman {
position: relative;
width: 100%;
}
.craftsman1 {
height: 180px;
}
.craftsman_b {
width: 100%;
background-color: #f0e3dc;
position: absolute;
left: 0;
top: 0;
}
.craftsman_b1 {
height: 180px;
}
.craftsman_t {
width: 100%;
position: absolute;
bottom: 10px;
left: 0;
font-size: 2em;
}
.craftsman_t p {
margin: 20px auto;
}
.craftsman2 {
height: 250px;
}
.craftsman_b2 {
height: 130px;
}
#craftsman_img {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 0;
}
#craftsman_img img {
width: calc(50% - 10px);
max-width: 196px;
height: auto;
margin: 0 5px;
}
.nagare {
display: flex;
flex-direction: column;
gap: 40px;
}
.nagare_waku {
width: 100%;
max-width: 1500px;
display: flex;
flex-direction: column;
margin: 0 auto;
background-color: #f9f7f3;
}
.nagare_base {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.nagare_base img {
width: 90%;
max-width: 400px;
height: auto;
margin: 0 5%;
}
.nagare_base p {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
line-height: 1.7em;
text-align: justify;
}
.nagare1 {
background-color: #514a0c;
}
.nagare2, .nagare5, .nagare8 {
background-color: #5e6176;
}
.nagare3, .nagare6 {
background-color: #5c682f;
}
.nagare4, .nagare7 {
background-color: #504a22;
}
.nagare_img {
width: 100%;
max-width: 600px;
background-color: #514a0c;
margin: 0 auto;
}
.to_oem {
width: 100%;
margin: 0 auto;
padding: 20px 0 70px 0;
background-color: #fff;
}
.to_oem p {
font-size: 1.5em;
line-height: 1.7em;
padding: 30px 0;
}
.l_button {
width: 250px;
height: 50px;
margin: 0 auto;
}
.l_button a {
width: 250px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.6em;
letter-spacing: 2px;
text-indent: 2px;
position: relative;
color: #fff;
background-color: #b2a8b9;
border-radius: 25px;
display: block;
text-decoration: none;
box-sizing: border-box;
}
.l_button a::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
}
.l_button a:hover {
background-color: #fff;
color: #b2a8b9;
border: 1px solid #b2a8b9;
}
.l_button a:hover::after {
border-left-color: #b2a8b9;
}
/* OEM
------------------------------------------------------------*/
.original_towel {
margin: 0 auto 10px auto;
background-color: #fff;
}
.oem_order {
padding: 50px 0 20px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.oem_order_waku {
width: 90%;
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.oem_order_w1 {
width: 100%;
background-color: #fff;
padding: 30px 20px 20px 20px;
box-sizing: border-box;
text-align: center;
}
.oem_order_w1m {
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
text-indent: 2px;
text-align: justify;
margin: 0 auto 5px auto;
}
.oem_order_w1t {
font-size: 1.5em;
margin: 0 auto 20px auto;
text-align: justify;
}
.oem_order_w1 img {
width: 100%;
max-width: 360px;
height: auto;
margin: 0 auto;
}
.oem_order_w2 {
width: 100%;
padding: 20px 20px 50px 20px;
box-sizing: border-box;
}
.oem_order_w2w {
width: 100%;
padding: 0 0 20px 0;
display: flex;
flex-direction: column;
}
.oem_order_w2m {
font-size: 1.7em;
font-weight: bold;
margin: 0 0 5px 0;
text-align: justify;
}
.oem_order_w2t {
font-size: 1.5em;
margin: 0 auto 20px auto;
text-align: justify;
}
.process {
padding: 40px 0;
}
.process p {
max-width: 90%;
margin: 0 auto 20px auto;
font-size: 1.5em;
text-align: justify;
}
.process_w {
width: 90%;
max-width: 1085px;
margin: 0 auto 40px auto;
display: flex;
}
.process_waku {
width: 100%;
max-width: 820px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.process_l {
justify-content: flex-start;
}
.process_r {
justify-content: flex-start;
}
.process_num {
width: 100%;
display: flex;
align-items: center;
margin: 0 0 5px 0;
}
.process_num img {
width: 23%;
max-width: 178px;
height: auto;
}
.process_num p {
width: 77%;
padding-left: 20px;
box-sizing: border-box;
font-size: 2em;
font-weight: bold;
}
.process_txt {
width: 83%;
border-top: 4px solid #d5b6b6;
padding: 5px 10px 0 5px;
box-sizing: border-box;
font-size: 1.4em;
line-height: 1.7em;
text-align: justify;
}

/* プリント注文
------------------------------------------------------------*/
.kiji {
margin: 50px auto 0 auto;
padding: 30px 0;
}
.kiji_w {
width: 90%;
max-width: 520px;
margin: 0 auto;
padding: 20px 0 30px 0;
box-sizing: border-box;
background-color: #654b6e;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
#kiji_txt {
width: 85%;
max-width: 360px;
margin: 0 auto 10px auto;
color: #fff;
text-align: justify;
}
.kiji_midashi {
font-size: 2em;
margin-bottom: 10px;
}
.kiji_naiyou {
font-size: 1.5em;
}
#kiji_img {
width: 85%;
max-width: 360px;
margin: 0 auto;
color: #654b6e;
font-size: 1.2em;
font-weight: bold;
}
.kiji_image {
position: relative;
}
.kiji_img_t1 {
position: absolute;
top: 5px;
right: 10px;
}
.kiji_img_t2 {
position: absolute;
bottom: 5px;
right: 10px;
}
.kiji2_w {
display: flex;
flex-direction: column;
margin: 25px auto 0 auto;
}
.kiji2_waku {
display: flex;
flex-direction: column;
text-align: justify;
width: 100%;
margin: 0 0 10px 0;
}
.kiji2_midashi {
font-size: 1.8em;
font-weight: bold;
}
.kiji2_naiyou {
font-size: 1.5em;
}
.print_1 {
padding: 70px 0 0 0;
background-color: #fff;
}
.print_1-2 {
padding: 0 0 100px 0;
}
/* ベース設定 */
.fix_inner {
max-width: 1920px;
width: 90%;
margin: 50px auto 100px auto;
}
/*　ここから重要！　*/
.bg-fix {
height: auto;
}
.bg-fix::before {
content: '';
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
width: 100%;
max-width: 1920px;/* .innerのmax-widthと同じ設定 */
aspect-ratio: 1920 / 1200;          /* ← 1200/1920 = 0.625 (比率) */
height: auto;
background-size: contain;
background-image: url();
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.print_1-2 .bg-fix.active::before {
display: block;
background-image: url(../images/oem/print/print1_b.jpg);
}
.woven_1-2 .bg-fix.active::before {
display: block;
background-image: url(../images/oem/woven/woven_b.jpg);
}
.size_img {
width: 90%;
max-width: 900px;
overflow: hidden;
}

.print_2 {
padding: 70px 0 10px 0;
}
.print_2_waku {
width: 90%;
max-width: 520px;
display: flex;
flex-direction: column;
margin: 0 auto 30px auto;
padding: 30px 20px;
box-sizing: border-box;
background-color: #fff;
border-radius: 10px;
}
.print2_txt {
width: 85%;
max-width: 360px;
margin: 0 auto 30px auto;
text-align: justify;
}
.print2_title {
font-size: 2.2em;
font-weight: 600;
letter-spacing: 2px;
text-indent: 2px;
margin-bottom: 20px;
}
.print2_md {
font-size: 1.8em;
line-height: 30px;
font-weight: bold;
margin: 10px 0;
padding-left: 10px;
}
.print2_m {
border-left: 10px solid #f5c0bf;
}
.print2_d {
border-left: 10px solid #9abcd5;
}
.print2_txt ul {
margin: 0 auto 20px auto;
}
.print2_txt li {
font-size: 1.5em;
text-indent: -1em;
padding-left: 1em;
margin-bottom: 5px;
}
.print2_img {
width: 100%;
max-width: 305px;
margin: 0 auto;
}
.print2_img p {
font-size: 1.3em;
text-align: justify;
margin-top: 10px;
}
.print_3_txt {
width: 90%;
max-width: 800px;
margin: 0 auto;
text-align: justify;
}
.print_3_txt p {
margin-bottom: 20px;
font-size: 1.5em;
line-height: 2.1em;
}
.design_img {
width: 90%;
margin: 30px auto 50px auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.design_img1 {
width: 100%;
max-width: 357px;
margin: 0 auto 50px auto;
}
.design_img2 {
width: 100%;
margin: 0 auto;
}
.design_img2 img {
max-width: 227px;
}
.design_img2 p {
font-size: 1.5em;
margin-top: 25px;
}
.design_att {
width: 90%;
max-width: 800px;
margin: 0 auto;
text-align: justify;
}
.print_4 {
padding: 70px 0 0 0;
background-color: #fff;
}
#option_waku {
width: 90%;
max-width: 350px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.option_w {
width: 100%;
max-width: 350px;
display: flex;
flex-direction: column;
margin: 20px auto 40px auto;
}
.option_w img {
border: 7px solid #e1d7c3;
box-sizing: border-box;
}
.option_title {
width: 100%;
font-size: 1.9em;
font-weight: bold;
margin: 8px auto;
}
.option_txt {
width: 100%;
margin: 15px auto 0 auto;
font-size: 1.4em;
text-align: justify;
line-height: 1.6em;
}
.option_txt table {
width: 100%;
margin: 5px auto;
}
.option_txt th[scope="row"] {
 width: 4.5em;
}
.print_5 {
padding: 70px 0 50px 0;
}
/* スマホタブ */
.tabs {
display: flex;
flex-direction: column;
width: 90%;
max-width: 500px;
margin: 0 auto;
}
.tab-buttons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tab-buttons button {
width: calc(50% - 4px);
height: 30px;
border: none; 
border-radius: 5px;
order: -1;
margin: 3px 0;
background: #654b6e;
opacity: .5;
color: #fff;
font-size: 1.3em;
text-align: center;
cursor: pointer;	
}
.tab-buttons button:hover {
opacity: .8;
}
.tab-buttons button.active {
opacity: 1;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* dl を左右2列に */
.tab-content dl {
display: grid;
grid-template-columns: 1fr 1fr;
border: 2px solid #d7cbb7;
margin-top: 10px;
padding: 0;
}
.tab-content dt, .tab-content dd {
width: calc(100% - 4px);
margin: 2px;
}
.pm_white {
height: 60px;
background: #ffffff url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
      <line x1='0' y1='0' x2='100' y2='100' stroke='%23d7cbb7' stroke-width='2'/>\
    </svg>");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.pm_beige {
height: 50px;
color: #fff;
background-color: #cabba2;
font-size: 1.5em;
line-height: 50px;
box-sizing: border-box;
}
.price_midashi {
height: 60px;
background-color: #eae1d4;
font-size: 1.5em;
font-weight: bold;
line-height: 60px;
}
.price_naiyou {
height: 50px;
background-color: #f6f2ec;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.num-wrap {
display: flex;
justify-content: center;
align-items: baseline;
white-space: nowrap;
}
.font-num {
font-family: Futura, 'Century Gothic';
font-weight: 500;
font-size: 2em;
margin-right: 3px;
}
.price_unit {
font-size: 1.3em;
}
.price_small{
font-size: 1.2em;
margin: 0;
line-height: 1em;
}
.pc-table {
display: none;
}
#price_att {
width: 90%;
max-width: 500px;
margin: 30px auto 0 auto;
font-size: 1.3em;
text-align: justify;
}
.price_att1 {
margin: 0 0 17px 0;
}
.txt_in3 {
padding-left: 3em;
text-indent: -3em;
margin: 3px 0;
}

/* フルオーダー注文
------------------------------------------------------------*/
.original_towel > p {
margin: 0 auto;
font-size: 1.5em;
font-weight: bold;
}
.woven_1 {
padding: 70px 0 0 0;
background-color: #fff;
}
.woven_1-2 {
padding: 0 0 100px 0;
}
.woven_1_waku {
width: 100%;
max-width: 1920px;
aspect-ratio: 180 / 207;
max-height: 1150px;
position: relative;
margin: 0 auto;
background-color: #654b6e;
}
.woven_2 {
padding: 70px 0 10px 0;
background-color: #fff;
}
.woven_2_waku {
width: 90%;
max-width: 500px;
display: flex;
flex-direction: column;
margin: 0 auto 50px auto;
}
.woven2_img {
width: 100%;
max-width: 350px;
margin: 0 auto 30px auto;
}
.woven2_txt {
width: 100%;
margin: 0 auto;
text-align: justify;
}
.woven2_title {
width: 100%;
font-size: 1.8em;
font-weight: bold;
padding-bottom: 10px;
border-bottom: 1px solid #b2a6b9;
}
.woven2_exp {
font-size: 1.5em;
font-weight: bold;
padding-top: 10px;
}
.woven2_exp2 {
font-size: 1.5em;
color: #77559f;
margin: 23px 0 8px 0;
}
.woven2_txt li {
font-size: 1.5em;
padding-left: 1em;
text-indent: -1em;
margin-bottom: 2px;
}
.woven_3 {
padding: 70px 0 50px 0;
}
#woven_3_w {
width: 90%;
max-width: 730px;
margin: 0 auto 20px auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
gap: 30px 10px;
justify-items: center;
}
#woven_3_w img {
width: 62px;
height: auto;
}
.woven_3 p {
width: 90%;
max-width: 730px;
margin: 0 auto;
font-size: 1.5em;
color: #5a5a5a;
text-align: justify;
}
.woven_4_txt {
width: 90%;
max-width: 800px;
margin: 0px auto;
}
.woven_4_txt {
width: 90%;
max-width: 800px;
margin: 0 auto 50px auto;
text-align: justify;
}
.woven_4_txt p {
font-size: 1.5em;
line-height: 1.8em;
text-align: justify;
}
.woven_5 {
padding: 70px 0 0 0;
}
.woven_con {
text-align: left;
}

/* 会社案内
------------------------------------------------------------*/
.com_1 {
padding: 0 0 50px 0;
}
.com_1_w {
width: 90%;
max-width: 600px;
margin: 50px auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.com_1_w img {
max-width: 144px;
}
.com_1_txt {
width: 100%;
}
.com_1_midashi {
font-size: 1.8em;
font-weight: bold;
text-align: center;
margin: 20px auto;
letter-spacing: 2px;
text-indent: 2px;
}
.com_1_naiyou {
font-size: 1.5em;
line-height: 1.8em;
text-align: justify;
}
.com_2_waku {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 50px 5%;
box-sizing: border-box;
background-color: #fff;
}
.w90_midashi {
width: 89%;
}
.com_2_w {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.com_2_midashi {
font-size: 1.8em;
font-weight: bold;
text-align: center;
margin: 20px auto;
letter-spacing: 2px;
text-indent: 2px;
}
.com_2_txt {
width: 100%;
font-size: 1.5em;
line-height: 2em;
text-align: justify;
}
.sign {
text-align: right;
}
.sign img {
max-width: 140px;
}
.ex_waku {
width: 100%;
max-width: 380px;
margin: 20px auto 0 auto;
display: flex;
flex-direction: column;
gap: 20px 0;
}
.lav_d_com_3 {
height: 150px;
}
.lav_com_3 {
height: 150px;
top: 0;
}
.com_table {
width: 80%;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.com_table_n {
width: 100%;
margin: 0 auto 20px auto;
}
.com_table_waku {
display: flex;
flex-direction: column;
}
.com_table_midashi {
width: 100%;
margin: 0 0 5px 0;
padding:0 10px;
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
color: #5a5a5a;
letter-spacing: 2px;
text-indent: 2px;
text-align: left;
}
.com_table_naiyou {
width: 100%;
padding:0 10px;
box-sizing: border-box;
font-size: 1.5em;
line-height: 1.5em;
color: #5a5a5a;
letter-spacing: 2px;
text-indent: 2px;
text-align: justify;
}
#com_map {
position: relative;
width: 80%;
max-width: 700px;
margin: 10px auto 50px auto;
height: 0;
padding-top: 50%; /* 比率を2:1に固定 */
}
#com_map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.com_his_w {
margin: 0 auto 50px auto;
}
.sdgs {
margin: 30px auto 50px auto;
}
.sdgs_img {
width: 100%;
max-width: 1500px;
margin: 0 auto;
aspect-ratio: 150 / 41;
position: relative;
}
.sdgs_img img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.sengen_waku {
width: 90%;
max-width: 920px;
margin: 50px auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#sengen {
display: inline-flex;
justify-content: center;
align-items: center;
}
#sengen img {
width: 71px;
height: auto;
margin-right: 25px;
}
#sengen p {
font-size: 2em;
font-weight: bold;
text-align: left;
}
#sengen_txt {
display: inline-block;
font-size: 1.6em;
margin-top: 20px;
text-align: justify;
}
#kouken {
width: 90%;
max-width: 580px;
margin: 0 auto;
height: 30px;
font-size: 1.5em;
line-height: 30px;
font-weight: bold;
letter-spacing: 2px;
text-indent: 2px;
text-align: center;
background-color: #cde5e1;
}
.sdgs_w {
width: 90%;
max-width: 920px;
margin: 50px auto 0 auto;
display: grid;
grid-template-columns: 1fr; /* スマホは縦並び */
row-gap: 40px; /* ボックス間の縦間隔 */
justify-items: center;
box-sizing: border-box;
}
.sdgs_waku {
width: 100%;
max-width: 440px;
padding: 35px 20px;
box-sizing: border-box;
display: grid;
grid-template-rows: auto auto 1fr auto; /* 上段:タイトル+テキスト, 2段目:midashi, 3段目:ul, 4段目:画像 */
row-gap: 10px;
position: relative;
}
.sdgs_waku::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle farthest-side, #b2a8b9 50%, transparent 50%) repeat-x top / 4px 4px,
radial-gradient(circle farthest-side, #b2a8b9 50%, transparent 50%) repeat-x bottom / 4px 4px,
radial-gradient(circle farthest-side, #b2a8b9 50%, transparent 50%) repeat-y left / 4px 4px,
radial-gradient(circle farthest-side, #b2a8b9 50%, transparent 50%) repeat-y right / 4px 4px;
z-index: 0;
}
.sdgs_top {
height: 150px;
z-index: 1;
}
.sdgs_title {
font-size: 2.5em;
font-weight: bold;
letter-spacing: 5px;
text-indent: 5px;
}
.sdgs_txt {
font-size: 1.5em;
text-align: justify;
margin: 10px auto 30px auto;
}
.sdgs_midashi {
font-size: 1.5em;
font-weight: bold;
z-index: 1;
}
.sdgs_waku ul {
width: 100%;
margin-bottom: 50px;
}
.sdgs_waku li {
font-size: 1.5em;
padding-left: 1em;
text-indent: -1em;
}
.sdgs_i_w {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
justify-items: start;
z-index: 1;
}
.sdgs_i_w img {
max-width: 73px;
}
.sdgs_w2 {
width: 90%;
max-width: 440px;
margin: 40px auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.sdgs_w2 img {
max-width: 360px;
}
.sdgs_w2 p {
width: 100%;
font-size: 1.5em;
text-align: justify;
margin-top: 30px;
}
/* 親ボックス */
.diag-box{ 
width: 100%;
aspect-ratio: 192 / 9;
position: relative;
overflow: hidden;
margin: 0;
line-height: 0;
}
/* 左上の三角 */
.diag-box::before {
content: "";
position: absolute;
inset: 0;
background: #fff;
clip-path: polygon(0 0, 0 101%, 101% 0); /* 少しオーバーラップ */
display: block;
transform: translateZ(0); /* GPU描画で隙間防止 */
}
/* 右下の三角 */
.diag-box::after {
content: "";
position: absolute;
inset: 0;
background: #b2a8b9;
clip-path: polygon(101% 101%, 0 101%, 101% 0); /* 少しオーバーラップ */
display: block;
transform: translateZ(0); /* GPU描画で隙間防止 */
}
.recruit_2 {
background-color: #b2a8b9;
padding: 50px 0;
margin: 0;
}
.recruit_m {
color: #fff;
}
.recruit_l {
width: 100%;
height: 4px;
background: radial-gradient(circle farthest-side, #fff, #fff 50%, transparent 50%, transparent);
background-size: 4px 4px;
background-repeat: repeat-x;
z-index: 3;
pointer-events: none;
position: relative;
}
.recruit_2 p {
width: 90%;
max-width: 800px;
margin: 0 auto 50px auto;
font-size: 1.5em;
line-height: 2em;
color: #fff;
}
.recruit_w {
width: 90%;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px 0;
}
.recruit_waku {
width: 100%;
background-color: #fff;
border: 5px solid #ededee;
box-sizing: border-box;
padding: 30px 0;
}
.recruit_waku > p {
color: #000;
font-size: 1.5em;
line-height: 1.8em;
text-align: justify;
margin: 0 auto;
}
.shokusyu_title {
width: 90%;
margin: 0 auto 30px auto;
display: flex;
flex-direction: column;
text-align: center;
color: #000;
font-weight: bold;
}
.shokusyu_midashi {
font-size: 2.5em;
}
.shokusyu_keitai {
font-size: 1.5em;
}

/* Q&A
------------------------------------------------------------*/
.faq_midashi {
margin: 0 auto 10px auto;
}
.faq_midashi_txt {
width: 90%;
margin: 20px auto;
font-size: 1.5em;
line-height: 2.1em;
text-align: justify;
}
.faq_midashi ul {
margin: 0 auto 30px auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
.faq_midashi li {
text-align: left;
padding: 4px 8px;
width: max-content;
}
.faq_midashi li:before {
content: '';
display: inline-block;
position: relative;
left: 0;
top: 0px;
width: 13px;
height: 13px;
background: #fff;
border: 1px solid #000;
box-sizing: border-box;
}
.faq_midashi li a {
font-size: 1.8em;
font-weight: bold;
text-decoration: underline;
color: #000;
padding-left: 5px;
}
.faq_midashi li a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
text-decoration: none;
}
.faq_waku {
width: 90%;
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
}
.accordion {
width: 100%;
background-color: #f8f0f0;
margin: 0;
padding: 0;
box-sizing: border-box;
border-top: 1px solid #b2a8b9;
border-bottom: 1px solid #b2a8b9;
margin-top: -1px;
}
.accordion:not([open]) {
margin-top: -1px;
}
.accordion summary {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
padding: 15px 0;
background-color: #fff;
font-size: 1.8em;
color: #000;
cursor: pointer;
border-bottom: 1px solid #b2a8b9;
margin-bottom: -1px;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary span {
flex: 1;
padding: 0 15px 0 20px;
font-weight: bold;
text-align: justify;
}
.accordion summary:before {
content: 'Q';
display: inline-flex;
justify-content: center;
align-items: center;
flex-flow: column; 
flex-shrink: 0; /* 小さく潰れないように */
vertical-align: top;
position: relative;
left: 10px;
top: 0;
width: 28px;
height: 28px;
background-color: #5a90bb;
border-radius: 50%;
line-height: 1.8em;
color: #fff;
}
.accordion summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 3px solid #787878;
border-right: 3px solid #787878;
content: '';
transition: transform .3s;
margin: auto 0;
}
.accordion[open] summary::after {
transform: rotate(225deg);
}
.accordion > div {
width: 100%;
position: relative;
margin: 0;
padding: 0;
opacity: 0;
transform: translateY(-10px);
transition: opacity .5s, transform .5s;
font-size: 1.5em;
line-height: 1.3em;
}
.accordion[open] > div {
width: calc(100% - 65px);
opacity: 1;
transform: none;
text-align: justify;
padding: 15px 0 15px 48px;
margin: 0;
}
.accordion[open] > div:before {
content: 'A';
position: absolute;
left: 10px;
top: 15px;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
background-color: #bc8caf;
border-radius: 50%;
color: #fff;
font-size: 1.3em;
line-height: 1;
}
.faq_long {
display: block; /* 縦並び */
width: 100%;
margin: 0 auto;
}
.faq_long dd {
margin-bottom: 5px;
}
.faq_short {
display: grid;
grid-template-columns: max-content 1fr; /* 左=dt一番長い幅、右=dd可変 */
gap: 5px 0;
}
.faq_short dt, .faq_short dd {
margin-bottom: 0;
}
.faq_short dd {
padding-left: 0.5em;
}
.midashi_ten dt {
padding-left: 1em;
text-indent: -1em;
}
.yajirushi dd {
padding-left: 1.8em;
text-indent: -1.3em;
}

/* お問い合わせ
------------------------------------------------------------*/
.contact_midashi {
margin: 0 auto 50px auto;
}
.to_o_form {
width: 90%;
max-width: 800px;
display: flex;
flex-direction: column;
font-size: 1.5em;
line-height: 2.1em;
}
.to_o_form p {
margin: 20px auto 0 auto;
text-align: justify;
}
.to_o_form > div {
margin-top: 20px;
text-align: right;
}
.to_o_form a {
text-decoration: underline;
}
.to_o_form a::after {
content: "";
display: inline-block;
margin-left: 0.4em;
border-top: 0.35em solid transparent;
border-bottom: 0.35em solid transparent;
border-left: 0.5em solid currentColor;
}
.to_o_form a:hover {
text-decoration: none;
}
.contact_form {
margin: 0 auto 50px auto;
}
.contact_waku {
width: 90%;
max-width: 900px;
margin: 0 auto;
text-align: left;
display: flex;
flex-direction: column;
}
.contact_waku > p {
width: 93%;
max-width: 830px;
margin: 0 auto 20px auto;
font-size: 1.5em;
}
.form_waku {
width: 93%;
max-width: 830px;
margin: 0 auto 15px auto;
display: flex;
flex-direction: column;
}
.form_l, .form_l-2 {
width: 100%;
color: #5a5a5a;
font-size: 1.5em;
font-weight: bold;
}
.form_r, .form_r-2, .form_r-3, .form_r-4, .form_r-5 {
width: 100%;
margin: 5px 0 0 0;
display: flex;
font-size: 1.5em;
}
.form_r {
justify-content: space-between;
font-size: 1.5em;
}
.form_r-2, .form_r-3, .form_r-4 {
flex-direction: column;
}
.form_r-2 {
gap: 5px 0;
}
.form_r-3, .form_r-4 {
color: #5a5a5a;
font-weight: bold;
}
.form_r-5 {
color: #5a5a5a;
font-weight: bold;
}
.iptxt1, .iptxt3 {
position: relative;
width: 100%;
}
.iptxt2 {
position: relative;
width : -webkit-calc(50% - 6px) ;
}
.iptxt4 {
position: relative;
width : 10em;
font-size: 1em;
}
.unit {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1em;
}
.unit span {
margin-left: 0;
}
input {
width: 100%;
padding: 0.5em;
transition: 0.3s;
font-size: 1em;
line-height: 22px;
background-color: #faf8ff;
border: 3px solid #c8c8c8;
border-radius: 7px;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 120px;
padding: 0.5em;
transition: 0.3s;
font-size: 1em;
line-height: 22px;
background-color: #faf8ff;
border: 3px solid #c8c8c8;
border-radius: 7px;
box-sizing: border-box;
}
input:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 5px 1px rgba(178,168,185, .5);
}
/* ラジオボタン */
.wpcf7 input[type=radio] {
display: none;
}
.wpcf7 input[type=radio] + span {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 0.1em 1em 0 0.5em;
position: relative;
width: auto;
}
.wpcf7 input[type=radio] + span::before {
background: #fff;
border: 2px solid #c8c8c8;
border-radius: 50%;
content: '';
display: block;
width: 18px;
height: 18px;
margin-top: -8px;
position: absolute;
top: 42%;
left: -17px;
}
.wpcf7 input[type=radio] + span::after {
background: #b2a8b9;
border-radius: 50%;
content: '';
display: block;
width: 12px;
height: 12px;
margin-top: -3px;
opacity: 0;
position: absolute;
top: 42%;
left: -12px;
transform: scale3d(.3,.3,1);
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.wpcf7 input[type=radio]:checked + span {
transition: all .25s ease;
}
.wpcf7 input[type=radio]:checked + span::before {
border-color: #c8c8c8;
}
.wpcf7 input[type=radio]:checked + span::after {
opacity: 1;
transform: scale3d(1,1,1);
}
/* チェックボックス */
.wpcf7 input[type=checkbox] {
display: none;
}
.wpcf7 input[type=checkbox] + span {
cursor: pointer;
position: relative;
margin: 0; 
padding: 0.2em 0 0 0.5em;
font-size: inherit;
box-sizing: border-box;
transition: opacity .25s ease;
}
.wpcf7 input[type=checkbox] + span::before {
content: "";
display: block;
position: absolute;
top: 3px;
left: -1em;
width: 1.24em;
height: 1.24em;
border: 2px solid #c8c8c8;
border-radius: 3px;
background-color: #fff;
box-sizing: border-box;
}
.wpcf7 input[type=checkbox] + span::after {
content: "";
opacity: 0;
display: block;
position: absolute;
top: 0.35em;
left: -0.6em;
width: 0.4em;
height: .8em;
border-right: 3px solid #b2a8b9;
border-bottom: 3px solid #b2a8b9;
box-sizing: border-box;
transform: rotate(40deg);
transition: opacity .25s ease;
}
.wpcf7 input[type=checkbox]:checked + span {
transition: all .25s ease;
}
.wpcf7 input[type=checkbox]:checked + span::before {
opacity: 1;
border: 2px solid #c8c8c8;
background-color: #fff;
transition: opacity .25s ease;
}
.wpcf7 input[type=checkbox]:checked + span::after {
opacity: 1;
border-right: 3px solid #b2a8b9;
border-bottom: 3px solid #b2a8b9;
transition: opacity .25s ease;
}
.form_r-4 > div:last-child {
margin-top: 5px;
}
.radio_group, .checkbox_group {
display: flex;
flex-direction: column;
gap: 0.5em !important;
}
.radio_group .wpcf7-list-item, .checkbox_group .wpcf7-list-item {
flex: 0 0 100%;
display: flex !important;
align-items: center;
}
.radio_group .wpcf7-form-control, .checkbox_group .wpcf7-form-control {
display: flex !important;
flex-direction: column;
gap: 0.3em;
}
.form_button {
width: 93%;
max-width: 830px;
margin: 20px auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
input.submit_button {
width:250px;
height:50px;
border-radius: 25px;
color: #fff;
background-color: #b2a8b9;
border: none;
font-size: 1.8em;
font-weight: bold;
line-height: 50px;
letter-spacing: 2px;
text-indent: 2px;
padding: 0;
margin-bottom: 30px;
}
input.submit_button:hover {
background-color: #9d91a3;
box-shadow: 0 6px 14px rgba(178,168,185, 0.6);
}
input.submit_button:active {
background-color: #8d8294;
box-shadow: 0 2px 5px rgba(100, 90, 110, 0.7);
transform: translateY(3px);
}
.form_button > p {
font-size: 1.5em;
}
.form_button a {
text-decoration: underline;
}
.form_button a:hover {
text-decoration: none;
}

.form_r-4 a {
color: #5a5a5a;
text-decoration: underline;
}
.form_r-4 a:hover {
text-decoration: none;
}
.selectbox {
position: relative;
}
.selectbox::before,
.selectbox::after {
position: absolute;
content: '';
pointer-events: none;
}
.selectbox::before {
display: inline-block;
right: 0;
width: 100%;
border-radius: 0 7px 7px 0;
background-color: #faf8ff;
}
.selectbox::after {
position: absolute;
top: 50%;
right: 1.4em;
transform: translate(50%, -50%) rotate(45deg);
width: 6px;
height: 6px;
border-bottom: 3px solid #c8c8c8;
border-right: 3px solid #c8c8c8;
}
.selectbox select {
appearance: none;
width: 100%;
min-width: 280px;
padding: 0.7em 0.5em;
border: 3px solid #c8c8c8;
border-radius: 7px;
background-color: #faf8ff;
font-size: 1em;
cursor: pointer;
}
.selectbox select:focus {
outline: none;
box-shadow: 0 0 5px 1px rgba(178,168,185, .5);
}
input[type="text"],
.selectbox select {
height: 50px;
}
.form_button > p a::after {
content: "";
display: inline-block;
margin-left: 0.4em;
border-top: 0.35em solid transparent;
border-bottom: 0.35em solid transparent;
border-left: 0.5em solid currentColor;
}
.form_mg {
margin-bottom: 40px;
}

/* CF7のエラーメッセージ
------------------------------------------------------------*/
.wpcf7 form .wpcf7-response-output {
font-size: 1.5em;
width: 90%;
max-width: 800px;
margin: 0 auto !important;
text-align: left;
padding: 10px 0;
border-radius: 10px;
box-sizing: border-box;
overflow-wrap: break-word;
}

/* 送信完了
------------------------------------------------------------*/
.thanks {
margin: 30px auto 60px auto;
width: 90%;
max-width: 800px;
font-size: 1.5em;
line-height: 2.1em;
text-align: justify;
}
.thanks_waku {
width: 100%;
text-align: center;
margin: 50px auto 0 auto;
}
.thanks_waku a {
text-decoration: underline;
}
.thanks_waku a:hover {
text-decoration: none;
}

/* プライバシーポリシー
------------------------------------------------------------*/
.privacy {
padding: 50px 0 70px 0;
}
.policy_waku {
width: 90%;
max-width: 850px;
margin: 0 auto;
padding: 50px 20px;
box-sizing: border-box;
background-color: #fff;
border: 3px solid #d1d1d1;
text-align: justify;
}
.policy_waku > p {
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
text-indent: 1px;
}
.policy_waku dl {
width: 100%;
margin: 50px auto 0 auto;
font-size: 1.5em;
}
.policy_waku dt {
font-weight: bold;
margin-bottom: 5px;
}
.policy_waku dd {
margin-bottom: 30px;
line-height: 1.7em;
}
.policy_waku dd:last-child {
margin-bottom: 0;
}