@charset "UTF-8";

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

   common-Setting

========================================================= */
html {}
body {color:#333; -webkit-text-size-adjust: 100%; font-family: 'Noto Sans JP', sans-serif; letter-spacing:1px; position:relative;}
h1,h2,h3,h4,h5,h6,input,button,textarea,select,p,blockquote,table,pre,address,ul,ol,dl,dt,dd,th,td {font-size:14px; font-weight: normal; text-align: left; overflow-wrap: break-word; line-height:2;}
h1,h2,h3,h4,h5,h6 {line-height:1.4;}
th,td,td p {line-height:1.8;}
img {width:100%; height:auto; vertical-align:bottom;}
li {list-style: none;}
a {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}
a:link    {color:#7ab03d; text-decoration:none;}
a:visited {color:#7ab03d; text-decoration:none;}
a:hover   {color:#7ab03d; text-decoration:underline;}
a:active  {outline:none;}

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

   header

========================================================= */
#outer_header {width: 100%; height: 65px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: 0.3s; position: fixed; z-index: 101;}
#outer_header.transform {background: rgba(255,255,255,0.98); box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
#header {width: 94%; max-width: 1200px; margin: 0 auto; padding: 9px 0;}
#outer_header .logo {width: 155px; height: 47px; text-indent: -99999px; background: url("../images/logo.png") no-repeat; background-size: 100% auto; transition: 0.3s;}
#outer_header.transform .logo {background: url("../images/logo.png") no-repeat; background-size: 100% auto;}
.header-left {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
.header-contact {display: none;}
#gnavi {display: none;}

@media screen and (min-width: 1025px) {
#outer_header {height: 85px;}
#header {padding: 16px 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center;}
#outer_header .logo {width: 175px; height: 53px;}
.header-left {gap: 25px;}
.header-contact {display: block; font-size: 12px; line-height: 1.8; letter-spacing: 0.5px;}
.header-contact p {margin: 0; color: #333; transition: 0.3s;}
#outer_header.transform .header-contact p {color: #333;}
#gnavi {display: block;}
#gnavi ul {display: -webkit-flex; display: flex;}
#gnavi li {line-height: 53px; margin-right: 12px;}
#gnavi li:last-child {margin: 0;}
#gnavi li a {color: #333; position: relative; display: inline-block; text-decoration: none; transition: 0.3s;}
#outer_header.transform #gnavi li a {color: #333;}
#gnavi li a::after {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 2px; background: #357451; transform: scale(0, 1); transform-origin: center top; transition: transform .3s;}
#gnavi li a:hover::after {transform: scale(1, 1);}
}

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

   footer

========================================================= */
#outer_footer {background: #f4f4f4;}
#footer {width: 90%; max-width: 1200px; padding: 40px 0; margin: 0 auto;}
#footer .logo {width: 180px; margin: 0 auto 20px;}
#footer_map {position: relative; padding-bottom: 300px; height: 0; overflow: hidden;}
#footer_map iframe, #footer_map object, #footer_map embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#outer_footer p {text-align: center; font-size: 12px;}
#outer_footer .copy {color: #FFF; line-height: 1.2; background: #7ab03d; padding: 25px 5%;}

@media screen and (min-width: 1025px) {
#footer {padding: 50px 0;}
#footer .logo {margin: 0 auto 30px;}
#footer_map {padding-bottom: 370px;}
#outer_footer .copy {padding: 35px 5%;}
}

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

   common

========================================================= */
.pc_area {display: none;}
.bold {font-weight: bold;}
.font10 {font-size: 10px;}
.font12 {font-size: 12px;}
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}
.text {margin-bottom: 1em;}
.txt-l {text-align: left;}
.txt-c {text-align: center;}
.txt-r {text-align: right;}

@media screen and (min-width: 1025px) {
.pc_area {display:block;}
.sp_area {display:none;}
.alpha a {transition:0.3s;}
.alpha a:hover {opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha(opacity=80)";}
}

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

   topicpath

========================================================= */
#topicpath {margin-bottom:30px;}
#topicpath ul {width:90%; max-width: 1000px; margin:0 auto; padding:20px 0 0;}
#topicpath li {display:inline; line-height:1.4; font-size:12px;}
#topicpath li:before {content:" > ";}
#topicpath li:first-child:before {content:"";}

@media screen and (min-width: 1025px) {
#topicpath {margin-bottom: 70px;}
#topicpath ul {padding:30px 0 0;}
}

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

   img

========================================================= */
.image_l .img,.image_r .img {margin-bottom: 20px;}
.main_sec_bg_inner .image_l .txt,.main_sec_bg_inner .image_r .txt {width:100%;}

@media screen and (min-width: 600px) {
.image_l,.image_r { display: -webkit-flex; display: flex; }
.image_r { -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.image_l .img,.image_r .img { width: 35%; margin-bottom: 0; }
.image_l .txt,.image_r .txt,.main_sec_bg_inner .image_l .txt,.main_sec_bg_inner .image_r .txt { width: 60%; }
.image_l .txt { padding: 0 0 0 5%; }
.image_r .txt { padding: 0 5% 0 0; }
.main_sec_bg_inner .image_l,.main_sec_bg_inner .image_r { width: 100%; }
}

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

   block

========================================================= */
#main {width:100%; margin:0 auto 60px;}
.main_sec, .main_sec_bg_inner {width:90%; max-width: 1000px; margin:0 auto;}
.main_sec_bg {padding:40px 0 30px; background:#7ab03d; color: #FFF;}
.main_sec_bg .ttl_pt03 {color: #FFF;}
.col-two .block, .col-three .block, .col-four .block {margin-bottom:20px;}
.col-two .block:last-child, .col-three .block:last-child, .col-four .block:last-child {margin-bottom:0;}
.anc_blc {margin-top:-70px; padding-top:70px;}

@media screen and (min-width: 600px) {
#main {margin:0 auto 80px;}
.main_sec_bg {padding:70px 0 60px;}
.col-two,.col-three, .col-four {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.col-two .block,.col-three .block,.col-four .block {margin-bottom:0;}
.col-two .block.mb,.col-three .block.mb,.col-four .block.mb {margin-bottom: 20px;}
.col-two .block,.col-three .block,.col-four .block {width:48%;}
.col-two .block:nth-child(2n),.col-three .block:nth-child(2n),.col-four .block:nth-child(2n) {margin-left: auto;}
}

@media screen and (min-width: 1025px) {
#main {margin:0 auto 120px;}
.col-two .block.mb, .col-three .block.mb, .col-four .block.mb {margin-bottom: 30px;}
.col-three .block,.col-three .block:nth-child(2n) {width:30%; margin-right: 5%;}
.col-three .block:nth-child(3n) {margin-right: 0;}
.col-four .block { width: 23.5%; margin-right: 2%; }
.col-four .block:nth-child(4n) { margin-right: 0; }
.anc_blc {margin-top:-90px; padding-top:90px;}
}

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

   title

========================================================= */
#page_title {background: url("../images/24996912_l.jpg") center; background-size: cover; padding-top:65px;}
#page_title h2 {width:90%; margin:0 auto; color: #FFF; text-align: center; font-size: 32px; font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; padding: 40px 0;}
.ttl_pt01 {font-size: 26px; text-align: center; line-height:1.2;}
.ttl_pt01::after {content:''; display: block; width: 40px; height: 4px; margin: 15px auto 30px; background: #7ab03d;}
.ttl_pt02 {font-size: 22px; margin-bottom: 20px; padding: 5px 0 5px 15px; border-left: #7ab03d 5px solid;}
.ttl_pt03 {font-size: 24px; font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; color: #357451; margin-bottom: 20px;}
.ttl_pt04 {font-size: 18px; font-weight: bold; padding: 13px 15px; background: #f7f7f7; border-left: #357451 5px solid; margin-bottom: 20px;}


@media screen and (min-width: 1025px) {
#page_title {padding-top: 85px;}
#page_title h2 {max-width: 1200px; font-size: 42px; padding: 100px 0;}
.ttl_pt02,.ttl_pt03,.ttl_pt04 {margin-bottom: 30px;}
.ttl_pt01 {font-size: 34px;}
.ttl_pt01::after {width: 50px; margin: 20px auto 50px;}
.ttl_pt03 {font-size: 26px;}
}

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

   margin

========================================================= */
.mt0 {margin-top:0px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mb0 {margin-bottom:0px !important;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}
.mb_t {margin-bottom:20px !important;}
.mb_s {margin-bottom:30px !important;}
.mb_m {margin-bottom:50px !important;}
.mb_l {margin-bottom:70px !important;}

@media screen and (min-width: 1025px) {
.mb_t {margin-bottom:30px !important;}
.mb_s {margin-bottom:50px !important;}
.mb_m {margin-bottom:80px !important;}
.mb_l {margin-bottom:100px !important;}
}

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

   Q&A

========================================================= */
.faq dl { margin-bottom: 15px; }
.faq dl:last-child { margin-bottom: 0; }
.faq dt { font-size: 20px; color: #FFF; background: #7ab03d; }
.faq dt,.faq dd { position: relative; }
.faq dt { line-height: 1.4; padding: 15px 25px 13px 50px; }
.faq dd { padding: 20px 25px 20px 50px; border: 2px solid #7ab03d; }
.faq i { color: #FFF; font-size: 24px; position: absolute; top: 17px; left: 15px; }
.faq dd i { color: #7ab03d; top: 23px; }

@media screen and (min-width: 1025px) {
.faq dt { padding: 15px 25px 15px 75px; }
.faq dd { padding: 20px 25px 20px 75px; }
.faq i { left: 40px; }
.faq dd i { top: 24px; }
}

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

   list

========================================================= */
.list_pt01 {overflow: hidden;}
.list_pt01 li {position: relative; font-size: 14px; margin-bottom: 10px; padding: 0 15px 0 20px; box-sizing: border-box;}
.list_pt01 li:after, .list_pt01 li:before {display: block; content: ''; position: absolute;}
.list_pt01 li:after {top: 8px; left: 0; width: 14px; height: 14px; background-color: #7ab03d; border-radius: 100%;}
.list_pt01 li:before {z-index: 2; top: 13px; left: 4px; width: 3px; height: 3px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.list_pt02 li {position: relative; font-size: 14px; margin-bottom: 10px; padding-left: 15px;}
.list_pt02 li:before {display: block; content: ''; position: absolute; top: 10px; left: 0; width: 8px; height: 8px; background-color: #7ab03d; border-radius: 100%;}
.list_pt01 li:last-child {margin-bottom: 0;}

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

   table

========================================================= */
.tbl_pt01,.tbl_pt02 {width:100%;}
.tbl_pt01 {border-right:#ccc solid 1px; border-top:#ccc solid 1px;}
.tbl_pt01 th,.tbl_pt01 td {padding: 10px 15px; border-left:#ccc solid 1px; border-bottom:#ccc solid 1px;}
.tbl_pt01 th {background:#f4f4f4; font-weight: bold;}
.tbl_pt01.under th, .tbl_pt01.under td {width:100%; display: block; box-sizing: border-box;}
.tbl_pt02 {border-top:#ccc solid 1px;}
.tbl_pt02 tr {border-bottom:#ccc solid 1px;}
.tbl_pt02 th, .tbl_pt02 td {display:block; box-sizing:border-box;}
.tbl_pt02 th {font-weight:bold; padding:15px 15px 0; color:#7ab03d;}
.tbl_pt02 td {padding:0 15px 15px;}

.scroll {overflow:auto; white-space: nowrap;}
.scroll::-webkit-scrollbar {height:5px;}
.scroll::-webkit-scrollbar-track {background:#F1F1F1;}
.scroll::-webkit-scrollbar-thumb {background:#BCBCBC;}

@media screen and (min-width: 600px) {
.wp15 { width:15% !important; }
.wp20 { width:20% !important; }
.wp25 { width:25% !important; }
.wp30 { width:30% !important; }
.wp35 { width:35% !important; }
.wp40 { width:40% !important; }
}

@media screen and (min-width: 1025px) {
.tbl_pt01.under th, .tbl_pt01.under td {display: table-cell;}
.tbl_pt01 th, .tbl_pt01.under th {width: 20%;}
.tbl_pt01 th, .tbl_pt01.under th, .tbl_pt01 td {padding: 15px;}
.tbl_pt02 th {padding: 20px 15px 0;}
.tbl_pt02 td {padding: 0 15px 20px;}
.scroll table { min-width: 700px; }
}

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

   button

========================================================= */
.txt_btn.ctr {margin: 0 auto;}
.txt_btn a {display: block; padding: 12px 10px; color: #333; font-size: 14px; line-height: 1.4; font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; letter-spacing: 2px; text-decoration: none; border: #111 1px solid; transition: 0.3s; text-align: center; background: rgba(255,255,255,0.2);}
.txt_btn.bg_color a {color: #FFF; border: none; background: #357451;}

@media screen and (min-width: 600px) {
.txt_btn.w200 {max-width: 200px;}
.txt_btn.w250 {max-width: 250px;}
.txt_btn.w300 {max-width: 300px;}
.txt_btn.w350 {max-width: 350px;}
}

@media screen and (min-width: 1025px) {
.txt_btn a {padding: 15px 10px; transition: 0.3s;}
.txt_btn a:hover {color: #FFF; border: #357451 1px solid; background: #357451;}
.txt_btn.bg_color a {padding: 12px 10px;}
.txt_btn.bg_color a:hover {border: none; background: #7ab03d;}
}

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

   policy

========================================================= */
.about_use dl {margin-bottom: 20px;}
.about_use dl:last-child {margin-bottom: 0;}
.about_use dt {font-weight: bold; font-size: 16px; color: #7ab03d;}

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

   products

========================================================= */
.products .item {margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ccc;}
.products .item:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}

.products .feature {margin-bottom: 20px;}
.products .feature li {font-size: 18px; font-weight: bold; padding: 10px 0 10px 50px; position: relative;}
.products .feature li span {display: block; width: 40px; height: 40px; color: #FFF; text-align: center; line-height: 40px; background: #7ab03d; border-radius: 100%; position: absolute; top: 10px; left: 0;}

@media screen and (min-width: 1025px) {
.products .item {margin-bottom: 50px; padding-bottom: 50px;}
}

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

   00.ページタイトル

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


/******************************** タブレット ********************************/
@media screen and (min-width: 600px) {

}



/******************************** PC ********************************/
@media screen and (min-width: 1025px) {

}

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

   Image Placeholder (Gray Box) Style for items
   ※画像がアップされるまでのグレーボックスの定義です。

========================================================= */
.image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
  border: 2px dashed #ced4da;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  box-sizing: border-box;
  padding: 20px;
  transition: all 0.3s ease;
}
.image-placeholder i {
  font-size: 32px;
  margin-bottom: 8px;
  color: #adb5bd;
}
.image-placeholder .placeholder-text {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #495057;
}
.image-placeholder .placeholder-filename {
  font-size: 11px;
  font-family: monospace;
  background: #fff;
  padding: 1px 6px;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  margin-top: 5px;
  color: #6c757d;
}
.thumb_img_wrap .image-placeholder {
  aspect-ratio: 1 / 1;
  padding: 5px;
}
.thumb_img_wrap .image-placeholder i {
  font-size: 16px;
  margin-bottom: 2px;
}
.thumb_img_wrap .placeholder-text {
  display: none;
}
.thumb_img_wrap .placeholder-filename {
  font-size: 8px;
  padding: 0px 2px;
}