@charset "utf-8";
:root{
  --bg-color: #fbf8eb;
  --text-color: #413126;
  --main-color: #007e43;
  --sub-color: #79d370;
  --accent-color: #000;
  --secondary-color: #000;

  --table-th: #413126;
  --table-td: #ffffff;
  --table-bd: #63554b;

  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif;

  --section-margin: 50px;
}

body,div,pre,blockquote,form,fieldset,input,textarea,select,option,dl,dt,dd,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,img,figure{
  margin: 0;
  padding: 0;
}
article,aside,canvas,details,figcaption,figure,header,footer,main,menu,nav,section,summary{
  display: block;
}
*,
*:before,
*:after{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html{
  font-size: 62.5%;
  position: relative;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}
body{
  background-color: var(--bg-color);
  font-family: var(--font-sans);
  color: var(--text-color);
  font-size: clamp(1.4rem, 1.31rem + 0.24vw, 1.6rem);
  line-height: 1.6;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
#wrap{
  width: 980px;
  margin: 0 auto;
}
main{
  margin: 2rem 0;
}

@media screen and (min-width: 980px){
  .over_width{
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
  }
}


/*=========================================
site link color
=========================================*/
a{
  color: var(--main-color);
  text-decoration: none;
}
@media (hover: hover){
  a:hover{
    text-decoration: underline;
  }
}


/*=========================================
title
=========================================*/
h2{
  margin: 1em 0;
  padding: 0.7em 0.2em;
  font-size: clamp(2.4rem, 2.22rem + 0.48vw, 2.8rem);
  font-weight: normal;
  text-box: trim-both cap alphabetic;
  background: var(--sub-color);
}

/*小見出し*/
h3{
  margin: 1em 0;
  padding: 0.5em 0.2em;
  font-size: clamp(2rem, 1.82rem + 0.48vw, 2.4rem);
  font-weight: normal;
  text-box: trim-both cap alphabetic;
  border-bottom: 1px solid var(--main-color);
}

/*注意文言内見出し*/
h4{
  margin: 1em 0;
  padding: 0.5em 0.2em;
  font-size: clamp(1.6rem, 1.42rem + 0.48vw, 2rem);
  font-weight: normal;
  text-box: trim-both cap alphabetic;
  background: #EFEAD6;
}

h5, h6{
  font-style: normal;
  font-weight: normal;
  font-size: clamp(1.4rem, 1.22rem + 0.48vw, 1.8rem);
  margin: 2rem 0;
}

/*=========================================
common
=========================================*/
img, figure, video{
  border: none;
  vertical-align: bottom;
}
hr{
  height: 0;
  padding: 0;
  border: 0;
  margin: 10px 0;
  border-top: 1px solid #007e43;
}
.width_full{
  width: -webkit-fill-available;
  width: -moz-available;
}
pre{
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

/* plan
--------------------------------------------------*/
/* .view_plan{text-align: center;} */
.view_plan img{max-width: 100%;}

/* table common
--------------------------------------------------*/
table img{vertical-align: bottom;}
table.tbl_fixed{table-layout: fixed;}

/* dl_base common
--------------------------------------------------*/
/*商品説明用*/
dl.dl_base dd:empty{display: none;}

/* text
--------------------------------------------------*/
div[class^="txt_"],
span[class^="txt_"],
p[class^="txt_"]{
  vertical-align: middle;
}
.txt_s{font-size: 90%;}
.txt_ss{font-size: 80%;}
.txt_l{font-size: 150%;}
.txt_ll{
  font-size: 3rem;
  font-weight: bold;
}
/*company*/
.txt_noselect{
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.txt_red{
  color: red;
  font-weight: bold;
}

/* align
--------------------------------------------------*/
.ta_c{text-align: center;}
.ta_r{text-align: right;}
.ta_l{text-align: left;}


/*=========================================
message list
=========================================*/
/*msg_
--------------------------------------------------*/
div[class^="msg_"],
p[class^="msg_"]{
  margin: 20px;
  padding: 10px;
}
div[class^="msg_"]:empty,
p[class^="msg_"]:empty{
  display: none;
}

/*msg_warning*/
.msg_warning{
  display: block;
  text-align: center;
  border: 1px solid #FF8383;
  background: #D82326;
  color: #ffffff;
}
.msg_warning a{color: yellow;}
.msg_warning strong{color:yellow;}

/*msg_error*/
div.msg_error{
  margin: 0;
  padding:0;
  color: #f00;
}

/*msg_success*/
.msg_success{
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

/*isystem-
--------------------------------------------------*/
div[id^="isystem-"],
p[id^="isystem-"]{
  display: block;
  text-align: center;
}
div[id^="isystem-"]:empty,
p[id^="isystem-"]:empty{
  display: none;
}
/*isystem-regist_word…登録系メッセージ*/
#isystem-regist_word{
  margin: 2rem auto;
  padding: 1rem;
  width: min(980px,90%);
  background: #fff;
  color: #000;
}


/*=========================================
input
=========================================*/
input[type="submit"], button{cursor: pointer;}
select, input, textarea, button{
  font-family: inherit;
  vertical-align: middle;
}

select, textarea,
input[type="text"],
input[type="email"],
input[type="password"]{
  padding: 8px;
  width: 100%;
  border: 1px solid #999999;
  border-radius: 4px;
  font-size: 1.6rem;
}

/* type="image"
--------------------------------------------------*/
input[type="image"]{
  display: block;
  margin: 2rem auto;
  background-color: transparent !important;
}

/* submit
--------------------------------------------------*/
/*pay/select*/        div[class="payments_block"] input[type="submit"],
/*bankagent*/        input[name="submit[btn][pay_bankagent][add]"],
/*bitcash*/            input[name="submit[btn][pay_bitcash][add]"],
/*credit*/              input[name="submit[btn][pay_credit][add]"],
/*netbank*/          input[name="submit[btn][pay_netbank][add]"],
/*point*/               input[name="submit[btn][pay_point][add]"],
/*information*/      input[name="submit[btn][user_detail_info][set]"],
/*login*/                form[name="user_login_frm"] input[name="submit[btn][doLogin][get]"],
/*view/expect/*/   form[name$="_pay"] input[type="submit"],
/*table btn*/          td.tbl_btn a,
/*premiere*/        .css_btn
{
  border: none; /*reset*/
  display: block;
  margin: 1em auto !important;
  width: 80%;
  padding: 10px;
  font-size: 2rem;
  color: #fff !important;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
  background: var(--main-color);
}
/*pay/select*/        div[class="payments_block"] input[type="submit"]:hover,
/*bankagent*/        input[name="submit[btn][pay_bankagent][add]"]:hover,
/*bitcash*/             input[name="submit[btn][pay_bitcash][add]"]:hover,
/*credit*/              input[name="submit[btn][pay_credit][add]"]:hover,
/*netbank*/          input[name="submit[btn][pay_netbank][add]"]:hover,
/*point*/               input[name="submit[btn][pay_point][add]"]:hover,
/*information*/      input[name="submit[btn][user_detail_info][set]"]:hover,
/*login*/               form[name="user_login_frm"] input[name="submit[btn][doLogin][get]"]:hover,
/*view/expect/*/   form[name$="_pay"] input[type="submit"]:hover,
/*table btn*/          td.tbl_btn a:hover,
/*premiere*/        .css_btn:hover
{
  background: color-mix(in srgb, var(--main-color) 80%, #fff);
}


/*=========================================
pay
=========================================*/
/* select
--------------------------------------------------*/
.payments_block{
  margin: 2rem 0;
  padding: 1rem;
  border: 2px solid rgba(0,0,0,1.00);
}

/* bitcash
--------------------------------------------------*/
a.bitcash_link{
  color: #fff;
  text-decoration: underline;
}
.bitcash_logo{
  width: 20%;
}

/* agree
--------------------------------------------------*/
.agree_submit{
  display: flex;
  justify-content: center;
}
.agree_submit input[type=submit]{order: 2;}
.agree_submit input[type=button]{order: 1;}

form[name="agree_frm"] input[type="submit"], form[name="agree_frm"] input[type="button"]{
  display: block;
  padding: 5px;
  margin: 5px;
  width: 45%;
  height: 60px;
  font-size: 1.5rem;
}


/*=========================================
table
=========================================*/
.tbl_base{
  margin: 10px 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 1px solid var(--table-bd);
  border-left: 1px solid var(--table-bd);
}
.tbl_base th{
  padding: 0.5em;
  width: 200px;
  border-right: 1px solid var(--table-bd);
  border-bottom: 1px solid var(--table-bd);
  background: var(--table-th);
  color: #fff;
  font-weight: normal;
}
.tbl_base td{
  padding: 0.5em;
  border-right: 1px solid var(--table-bd);
  border-bottom: 1px solid var(--table-bd);
  background: var(--table-td);
}
@media (min-width: 981px){
  td.tbl_btn{
    width: 30%;
  }
}


/*=========================================
dl
=========================================*/
.dl_base dt{
  margin-bottom: 0.5rem;
  padding: 0.5em;
  border-left: 5px solid var(--sub-color);
  color: var(--main-color);
}
.dl_base dd{
  margin: 0 0 1rem;
  padding: 0.5em;
}

/*利用規約＆ポリシーで使用*/
.dl_rule{
  ol, ul{
    margin: 0.2em 0 0.5em;
    padding-left: 1.5em;
  }
  li{margin-bottom: 0.4em;}
}


/*=========================================
header
=========================================*/
header{
  padding: 10px 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
header .logo{
  display: flex;
  align-items: center;
}

.sns_ig{
  margin: 0 1rem;
}

/*tableサイズ調整*/
.header_info{
  width: fit-content;
  th{
    width: 120px;
  }
}
.member_info{
  width: 200px;
  text-align: center;
}

/* header_nav
--------------------------------------------------*/
.header_nav{
  padding-block: 10px;
  background: #fff;
  display: flex;
  a{
    font-size: 1.8rem;
    font-family: var(--font-serif);
  }
}

.header_nav ul{
  margin: 0;
  padding: 10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 200px);
  li{
    padding: 1rem 0;
    width: calc(100% / 3);
    text-align: center;
    &::before{
      content: url(../../img/pc/icon_clover.png);
      margin-right: 10px;
    }
  }
  a{
    text-decoration: underline;
    &:hover{
      text-decoration: none;
    }
  }
}

.mailbox_btn{
  width: 200px;
  display: block;
  padding: 10px;
  font-size: 2rem;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  background: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}


/*=========================================
footer
=========================================*/
footer{
  background: var(--main-color);
  padding: 10px;
  background: #006837;
  color: #fff;
}
.footer_nav{
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: flex;
  justify-content: center;
  li{
    margin: 10px 15px;
  }
  a{
    color: #fff;
    text-decoration: underline;
    &:hover{
      text-decoration: none;
    }
  }
}

.footer_aten{
  margin-bottom: 20px;
  padding-inline: 10px;
  font-size: 1.4rem;
}
.copy{
  padding: 10px;
  text-align: center;
  font-size: 1.4rem;
}

.footer_sns{
  padding: 10px;
  text-align: center;
}

/*=========================================
def_index
=========================================*/
.hero{
  margin: var(--section-margin) 0;
}

/* login */
.login{
  margin: var(--section-margin) 0;

  .tbl_base{
    margin: 0 auto;
    width: 80%;
  }
}

/* domain */
.domain{
  margin: var(--section-margin) 0;
  padding-bottom: 20px;
  background: #efead6;
}
.domain_wrap{
  display: flex;
  justify-content: space-around;
}


/*=========================================
user_index
=========================================*/
.flash_link:hover{
  animation: flash 0.8s linear;
}
@keyframes flash{
  0%{opacity: 0.2;}
  100%{opacity: 1;}
}

/* みんなの伝言板
--------------------------------------------------*/
.board{
  position: relative;
  margin: var(--section-margin) 0;
  a{
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* カレンダー
--------------------------------------------------*/
.calendar{
  margin: var(--section-margin) 0;
}
.calendar img{
  width: 100%;
}

.calendar_head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.calendar_head span:first-child{
  width: 290px;
}

/* お便りコーナー
--------------------------------------------------*/
.letter_section{
  margin: var(--section-margin) 0;
}
.voice_wrap{
  margin: 30px 0;
  padding: 20px 50px;
  background: #efead6;
  letter-spacing: 0.1em;
}

/*ユーザー情報*/
.voice_head{
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 90%;
}
.voice_head .img{
  width: 202px;
  margin: 0 20px 20px;
  border: 1px solid #c7ac8e;
}
.tbl_voice{
  margin: 10px 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 1px solid var(--table-bd);
  border-left: 1px solid var(--table-bd);
}
.tbl_voice th{
  padding: 0.5em;
  width: 200px;
  border-right: 1px solid var(--table-bd);
  border-bottom: 1px solid var(--table-bd);
  background: var(--table-th);
  color: #fff;
  font-weight: normal;
}
.tbl_voice td{
  padding: 0.5em;
  border-right: 1px solid var(--table-bd);
  border-bottom: 1px solid var(--table-bd);
  background: var(--table-td);
}

/*アコーディオン*/
.letter dt,
.reply dt{
  margin-bottom: 5px;
  padding: 1.5rem 1em;
  padding-left: 1.5em;
  position: relative;
  cursor: pointer;
  background: #79d370;
  border-radius: 6px;
  text-box: trim-both cap alphabetic;
  font-size: 2.6rem;
  font-family: var(--font-serif);
  font-weight: bold;
}
.letter dt::after,
.reply dt::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5em;
  width: 10px;
  height: 10px;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
}
.letter dt.active::after,
.reply dt.active::after{
  transform: translateY(-40%) rotate(225deg);
}
.letter dd,
.reply dd{
  margin: 20px 0;
}

/*届いたお便り*/
/*フォント*/
.letter.font1 .letter_body{
  font-size: 21px;
  font-family: "Kiwi Maru", serif;
}
.letter.font2 .letter_body{
  font-size: 20px;
  font-family: "BIZ UDPGothic", sans-serif;
}
.letter.font3 .letter_body{
  font-size: 22px;
  font-family: "Zen Old Mincho", serif;
}

/*便箋*/
.letter_body{
  margin: 0 auto;
}

/* 手紙の線 */
.letter_body p{
  margin: 0;
  line-height: 2.5em;
  letter-spacing: 0.1em;
  min-height: 200px;
  position: relative;

  z-index: 1;
    &::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to top, #999999 0 1px, transparent 0px 1lh);
    z-index: 1;
  }
}
/*手紙の線の後ろの背景色*/
.letter_body p{
  &::after{
    position: absolute;
    content: "";
    width: 104%;
    height: 102%;
    top: 0;
    left: -2%;
    z-index: -1;
    background: rgba(255,255,255,0.5);
  }
}

/*便箋の背景*/
.letter .letter_body{
  padding: 4em 2em;
  background: #fff;
  width: 750px;
}

.letter.back0 .letter_body{
  padding: 4em 2em;
  background: #fff;
  width: 750px;
}

.letter.back1 .letter_body{
  padding: 7em 2em 5em;
  width: 750px;
  min-height: 500px;
  background:
    url(../../img/pc/letter/letter_back1_top.jpg) top center no-repeat,
    url(../../img/pc/letter/letter_back1_bottom.jpg) bottom center no-repeat #fff;
  box-shadow: 0px 0px 2px #bdbdbd;
}

.letter.back2 .letter_body{
  padding: 8em 2em 5em;
  width: 750px;
  min-height: 500px;
  background:
    url(../../img/pc/letter/letter_back2_top.jpg) top center no-repeat,
    url(../../img/pc/letter/letter_back2_bottom.jpg) bottom center no-repeat #fff;
  box-shadow: 0px 0px 2px #bdbdbd;
}

.letter.back3 .letter_body{
  padding: 2em 2em calc(2em + 2%);
  width: 750px;
  min-height: 500px;
  background:
    url(../../img/pc/letter/letter_back3.jpg) top center no-repeat;
}

/*カエデからの返信*/
.reply_body{
  margin: 0 auto;
  width: 750px;
  padding: 16px;
  background: #c4e7c0;
  border: 1px solid #79d370;
  font-size: 1.8rem;
}

/* カエデのアトリエ
--------------------------------------------------*/
.atelier{
  margin: var(--section-margin) 0;
}

.atelier_goods{
  background: url(../../img/pc/index/atelier_bg.jpg) no-repeat bottom center;
}

.atelier_goods ul{
  margin: 0;
  padding: 0.8rem;
  list-style: none;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  font-size: 2.5rem;
}
.atelier_goods li{
  padding: 0.8rem;
  width: calc(100% / 3);
}
.atelier_goods li a{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 4px #000,-1px -1px 4px #000;
  text-decoration: underline;
  &:hover{
    animation: flash 0.7s linear ;
  }
}
.atelier_goods li p{
  flex-grow: 1;
  margin: 5px 0 10px;
}
.atelier_goods li img{
  width: 100%;
}

/* contact form
--------------------------------------------------*/
.contact_form th{
  width: 400px;
}
.contact_form .hissu{
  background: #f00;
  padding: 2px;
}

.contact_submit{
  display: flex;
  justify-content: center;
}
.contact_submit input[type=submit]{order: 2;}
.contact_submit input[type=button]{order: 1;}

.contact_submit input[type="submit"],
.contact_submit input[type="button"]{
  display: block;
  cursor: pointer;
  padding: 5px;
  margin: 1em auto;
  width: 45%;
  height: 60px;
  border: none;
  font-size: 2rem;
}

.contact_submit input[type="submit"]{
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  background: var(--main-color);
}
.contact_submit input[type="button"]{
  background: #e6e6e6;
  border-radius: 6px;
  border: 1px solid #999;
}

/*=========================================
lp
スマホ最適化の実験としてSMのbanner_scriptを読み込ませているので
CSSはsmの方に記載しています
=========================================*/