/* ======================================
メインビジュアル */

.mvarea { position: relative; overflow: hidden;}
.hero_outer {
   position: relative;
   width: 100%;
   height: 100%;
   height: 100vh;
   background: url(img/index/mv_bg.jpg) no-repeat;
   background-size: cover;
   background-position: center;
}
.hero {
   position: absolute;
   top: 48%;
   left: 50%;
   transform: translate(-50%,-52%);
   z-index: 5;
   width: 100%;
}
.culover_logo {
   width: 250px;
   margin: 0 auto 3.5em auto;
}
.culover {
   width: 160px;
   margin: 0 auto 0 auto;
}
.culover_catch {
   color: #fff;
   margin-top: -1em;
   font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
   letter-spacing: .1em;
}
@media print, screen and (min-width: 768px){
.culover_logo { width: 330px;}
.culover { width: 230px;}
}
@media print, screen and (min-width: 1560px){
.culover_logo { width: 450px;}
.culover { width: 310px;}
}

.hero_content {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
z-index: 1;
}
@media print, screen and (min-width:1025px){
.hero_content {
 left: 0;
 width: 50%;
 align-items: flex-start;
}
}

.scrolldown {
   position:absolute;
   left: 50%;
   bottom: 1em;
   height: 40px;
  }
.scrolldown span{
   position: absolute;
   bottom: 40px;
   left: -50%;
   transform: translateX(-50%);
   color: #eee;
   font-size: 85%;
   letter-spacing: 0.05em;
   z-index: 1;
}

.scrolldown::after{
   content: "";
   position: absolute;
   bottom: 0;
   left: -50%;
   transform: translateX(-50%);
   width: 1px;
   height: 40px;
   background: #eee;
   /*線の動き2秒かけて動く。永遠にループ*/
   animation: pathmove 2s ease-in-out infinite;
   opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
   height:0;
   top:0;
   opacity: 0;
}
30%{
   height: 25px;
   opacity: 1;
}
100%{
   height:0;
   top: 40px;
   opacity: 0;
}
}


/* ==========================
   見出し等共通　*/

.section_title {
   line-height: 1.2;
   margin-bottom: 1em;
   font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
   letter-spacing: .1em;
   position: relative;
   color: #FBE4B2;
}
.en_body .section_title { letter-spacing: 0;}

.title_pic img { height: 100%; width: auto;}
.title_pic {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   height: 50px;
}
@media print, screen and (min-width: 1025px) {
.section_title { margin-bottom: 1.5em;}
.title_pic { height: 100px;}
}



/* ==========================
   コンセプト　*/

.about_catch {
   position: relative;
   color: #fff;
   margin-bottom: 1.5em;
   font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
}
.about_catch_pic {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 90%;
}
@media print, screen and (min-width: 1025px) {
.about_catch_pic img { height: 100%; width: auto;}
.about_catch_pic { height: 120px; width: auto;}
}

.about_catch_sub {
   color: #fff;
   margin-bottom: 2em;
}
.about_catch_sub small {
   line-height: 1.5;
   display: block;
   margin-top: 1em;
}
@media print, screen and (min-width: 1025px) {
.about_catch_sub { margin-bottom: 4em;}
}

.about_back {
   background: #766557;
   margin-bottom: 2em;
   padding-top: 4em;
}
@media print, screen and (min-width: 1025px) {
.about_back { margin-bottom: 4em; padding-top: 8em;} 
}

.about_txt {
   color: #fff;
}

.about_title {
   color: #FBE4B2;
   font-size: clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
   line-height: 1.4;
   border-left: solid 5px #FBE4B2;
   padding-left: .5em;
   letter-spacing: .1em;
}
.en_body .about_title { letter-spacing: 0;}

@media print, screen and (max-width: 767px) {
.about_item {
   display: flex;
   flex-direction: column;
}
.about_pic { order: 1; margin: 0 3% 1.5em;}
.about_cont { order: 2;}
.about_list li { margin-bottom: 2em;}
}

@media print, screen and (min-width: 768px) {
.about_item {
   position: relative;
}
.about_cont {
   display: flex;
}
.about_list>li:nth-child(odd) .about_cont:before {
   content: "";
   width: 50%;
   height: 100%;
   display: block;
}
.about_list>li:nth-child(even) .about_cont:after {
   content: "";
   width: 50%;
   height: 100%;
   display: block;
}
.about_list>li:nth-child(odd) .about_txt {
   width: 45%;
   margin-left: auto;
}
.about_list>li:nth-child(even) .about_txt {
   width: 45%;
   margin-right: auto;
}
.about_list>li:nth-child(odd) .about_pic {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
}
.about_list>li:nth-child(even) .about_pic {
   position: absolute;
   top: 0;
   right: 0;
   width: 50%;
}
.about_list li { margin-bottom: 6em;}
}


@media print, screen and (min-width: 1025px){
.vg_pic {
   background: url(img/index/vg.jpg) no-repeat;
   padding: 5em 0;
   min-height: 100%;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
}
@media print, screen and (min-width: 1025px) {
.vg_pic { padding: 13em 0;}
}
}


/* ==========================
   仕様　*/

.table01 {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
}
.table01 th,.table01 td {
   display: block;
   width: 100%;
}
.table01 th {
   font-weight: 400;
   text-align: left;
   padding: .5em .5em 0;
}
.table01 td {
   padding: 0 .5em .5em;
   border-bottom: 1px #E4E4E4 solid;
}
@media print, screen and (min-width: 600px) {
.table01 th,.table01 td {
   display: table-cell;
   border-bottom: 1px #E4E4E4 solid;
}
.table01 th {
   width: 23%;
   padding: 1em 1em 1em 3em;
}
.table01 td {
   width: 77%;
   padding: 1em;
}
}


/* ==========================
   使い方　*/

.tukaikata_title img {
   width: 50px;
   margin-right: 1.2em;
}
.tukaikata_title {
   display: flex;
   align-items: center;
   font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
   color: #FBE4B2;
   background: #181818;
   padding: .5em 0;
}

.tukaikata_list li { padding-bottom: 2em;}

.tukaikata_list li:nth-last-child(-n+2)::before { content: none;}

.tukaikata_txt {
   margin-top: .5em;
}

.tukaikata_list li:last-child .tukaikata_title img {
   width: 100px;
   margin-right: 1.2em;
}
.tukaikata_list li:last-child  .tukaikata_txt {
   width: 100%;
   padding-left: 0;
}

@media print, screen and (min-width: 768px) {
.tukaikata_list li {
   display: flex;
   justify-content: space-between;
}
.tukaikata_list li { padding-bottom: 2.5em;}
.tukaikata_cont { width: 50%;}
.tukaikata_pic { width: 40%;}
.tukaikata_list li { position: relative;}
.tukaikata_list li::before {
   content: "";
   position: absolute;
   top: 0%;
   left: 25px;
   width: 1px;
   height: 100%;
   background: #FBE4B2;
   z-index: -1;
}
.tukaikata_txt {
   width: calc(100% - 50px);
   margin-left: auto;
   padding-left: 1.7em;
}
}


/* ==========================
   お手入れ方法について　*/

.teire_txt_main {
   font-size: 110%;
   margin-bottom: 1.5em;
}

.teire_txt_list li {
   margin-left: 1em;
   text-indent: -1em;
   margin-top: .5em;
}
.teire_txt_list li::before { content: "・";}

.teire_pic { margin-bottom: 1em;}

@media print, screen and (min-width: 768px) {
.teire_cont {
   display: flex;
   justify-content: space-between;
}
.teire_pic,.teire_txt { width: 48%;}
.teire_pic { margin-bottom: 0;}
}


/* ==========================
   替刃／利き手仕様について　*/

.kikite_main {
   font-size: 110%;
   margin-bottom: 1.5em;
}

.kikite_title {
   line-height: 1.5;
   font-size: 110%;
   border-left: solid 4px #FBE4B2;
   padding-left: .5em;
   color: #FBE4B2;
}

.kikite_list li { margin-bottom: 2em;}

@media print, screen and (min-width: 768px) {
.kikite_list {
   display: flex;
   justify-content: space-between;
}
.kikite_list li { width: 31%;}
}

.kikite_txt_sub { font-size: 80%;}


/* 注釈 */
.sub_txt {
   font-size: 85%;
   background: #FAFAFA;
   padding: 1.5em;
   color: #181818;
}
.sub_txt li { margin-left: 1em; text-indent: -1em; line-height: 1.5;}
.sub_txt li + li { margin-top: .3em;}
.sub_txt li::before { content: "※";}



/* ===============================
   私たちが製造しています */

.us_txt01 p,
.us_txt02 p {
   margin-bottom: 1.5em;
}
@media print, screen and (min-width: 1025px) {
.us_txt01 p,
.us_txt02 p { margin-bottom: 2.5em;}
}


.us_back {
  position: relative;
}
.us_back::before {
   content: "";
   background: rgba(0, 0, 0, 0.714);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

/* 背景共通 */
.us_bg01,
.us_bg02 {
  position: sticky;
  top: 0;
  height: 100vh;
  background-size: cover;
  transition: opacity 1s ease;
  z-index: -1;
}

/* 初期背景 */
.us_bg01 {
  background-image: url(img/index/us01.jpg);
  background-position: center;
  opacity: 1;
}

/* 切替用背景 */
.us_bg02 {
  background-image: url(img/index/us02.jpg);
  opacity: 0;
  background-position: top center;
  margin-top: -100vh; /* ← 重ねるため重要 */
}

/* フェード切替 */
.us_back.is-second .us_bg02 { opacity: 1;}
.us_back.is-second .us_bg01 { opacity: 0;}

/* テキスト */
.us_cont {
  position: relative;
  z-index: 1;
  color: #fff;
}
.us_cont .section_title {
   margin-bottom: 2em;
}
@media print, screen and (min-width: 1025px) {
.us_cont .section_title { margin-bottom: 3em;}
}

/* ボタン */
.us_btn li a {
   display: block;
   background: #766557;
   color: #fff;
   text-decoration: none;
   padding: .7em 3em;
   position: relative;
   text-align: center;
   font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
   margin-top: 2em;
   transition: all .2s ease;
}
.us_btn li a::before {
   content: "";
   display: block;
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(100% - .5em);
   height: calc(100% - .5em);
   border: 1px solid rgba(255, 255, 255, 0.8);
   z-index: 10;
}
.us_btn li a::after {
   font-family: 'general';
   content: "\e900";
   position: absolute;
   top: 50%;
   right: 1.3em;
   transform: translateY(-50%);
   font-size: 110%;
}
.us_btn li a span {
   font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
   display: block;
}

@media print, screen and (min-width: 768px) {
.us_btn {
   display: flex;
   justify-content: space-between;
}
.us_btn li { width: 47%;}
}

@media print, screen and (min-width: 1025px) {
.us_btn li a:hover { background: #87796e;}
}


/* ===============================
   刻印サービス */

.kokuin_btn { text-align: center;}
.kokuin_btn a {
   display: block;
   background: #766557;
   color: #fff;
   text-decoration: none;
   padding: .7em 3em;
   position: relative;
   text-align: center;
   margin-top: 2em;
   transition: all .2s ease;
}
.kokuin_btn a::before {
   content: "";
   display: block;
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(100% - .5em);
   height: calc(100% - .5em);
   border: 1px solid rgba(255, 255, 255, 0.8);
   z-index: 10;
}
.kokuin_btn a::after {
   font-family: 'general';
   content: "\e905";
   position: absolute;
   top: 50%;
   right: 1.3em;
   transform: translateY(-50%);
   font-size: 90%;
   font-weight: 400;
}

@media print, screen and (min-width: 1025px) {
.kokuin_btn a:hover {
   background: #87796e;
}
}


/* ===============================
   お問い合わせ */

.contact_back {
   background: #766557;
}
.contact_back .section_title { color: #fff;}

.contact_cont {
   background: #fff;
   padding: 1em;
}
@media print, screen and (min-width: 1025px) {
.contact_cont { padding: 2em;}
}


/* ===============================
   フォーム */

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
   box-shadow: none!important;
   max-width: 100%!important;
   min-width: 250px!important;
}
@media print, screen and (min-width:1025px){
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
   min-width: 300px!important;
   width: auto!important;
}
}

.mfp_element_submit,
.mfp_element_reset,
.mfp_element_button,
button.mfp_next,
button.mfp_prev {
   background: #f7f7f7 !important;
   text-shadow: none!important;
   color: #555 !important;
   font-weight: 400 !important;
}

form#mailformpro { color: #181818 !important;}
form#mailformpro label {display: block !important; color: #181818 !important;}
form#mailformpro label.mfp_checked { box-shadow: none !important;}
   


div.mfp_err { font-size: 90%;}



.contact_attention .icon-exlink { margin-right: .5em;}

form#mailformpro input, form#mailformpro textarea {
   padding: .3em;
   font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
   vertical-align: middle;
}

ul#mfp_phase_stat { display: none;}
div.mfp_buttons { font-size: 1.1em !important;}

#mfp_phase_confirm h4 {
   font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem) !important;
   color: #333 !important; ;
   }
   table#mfp_confirm_table { color: #181818 !important;}
   table#mfp_confirm_table tr th,
   table#mfp_confirm_table tr td { font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem) !important; font-weight: normal !important;}


/* table */

.tabletype01 { width: 100%; font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); overflow: hidden; margin-bottom: 2em; border-collapse: collapse;}
.tabletype01 input,
.tabletype01 select { vertical-align: middle;}

.tabletype01 th,
.tabletype01 td {
 width: 100%;
 display: block;
 width: 100%;
 text-align: left;
}
.tabletype01 th { padding: .5em 0  0 0; font-weight: bold; color: #000;}
.tabletype01 td { padding: 0 0 .5em 0;}

.caution {
   color: #B22222;
   font-size: 110%;
   margin-left: .1em;
   font-weight: 400;
}

.gobtn i { margin-left: .5em;}

.textbody { width: 99% !important;}

.radiolist { overflow: hidden;}
.radiolist li { display: inline; float: left; margin-right: .5em; margin-bottom: .5em;}

.contacttable02 { width: 100%;}

.contacttable02 td {
 border: none;
 text-align: center;
 padding: .5em 3.125%;
}

@media print, screen and (min-width:900px) {
.tabletype01 th {
 display: table-cell;
 padding: 1em;
 white-space: nowrap;
 font-weight: normal;
 width: auto;
 float: none;
 vertical-align: top;
}

.tabletype01 td {
 display: table-cell;
 padding: 1em;
 width: auto;
 float: none;
}

.tabletype01 caption { padding: 0;}

.contacttable02 { margin: 1em 0;}

}


.tabletype01 th {
   font-family: "YuMincho", "Yu Mincho";
   font-weight: 700;
}

.mfp_buttons button {
   cursor: pointer;
   outline: none;
   display: block;
   background: #766557 !important;
   color: #fff !important;
   text-decoration: none;
   padding: 1em;
   position: relative;
   text-align: center;
   font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem) !important;
   margin: 0 auto;
   font-weight: 700 !important;
   border: none;
   width: 80%;
   max-width: 350px;
   transition: all .2s ease;
}
.mfp_buttons button::before {
   content: "";
   display: block;
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(100% - .5em);
   height: calc(100% - .5em);
   border: 1px solid rgba(255, 255, 255, 0.8);
   z-index: 10;
}
@media print, screen and (min-width: 1025px){
.mfp_buttons button:hover { opacity: .7; box-shadow: none !important;}
}