@charset "utf-8";

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

common.css

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

/*---------------------------------------------
reset
---------------------------------------------*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
table, th, td { border-collapse:collapse;border-spacing:0;}
th , td { word-wrap:break-word; }
ol li, ul li { list-style:none; }
img { border:0; vertical-align:bottom; }
input, textarea { vertical-align:middle; }
address, em { font-style:normal; }

*:focus { outline: none; }


body { font-family:'Noto Sans JP', 'roboto' , Helvetica, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,  "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; line-height: 1; height: 100%; text-align: left; margin:0; padding:0; color:#333; -webkit-text-size-adjust:100%; position:relative; }

:root {
--beige:#F9F8F0;
--middle_beige:#EBE5D9;
--pale_gray:#EBEBEB;
--light_gray:#DDDDDD;
--light_middle_gray:#9F9F9F;
--middle_gray:#707070;
--gray:#515151;
--heavy_gray:#333333;
--pale_green:#f2f7ec;
--green:#84B045;
--mos_green:#19623B;
--white:#FFFFFF;
--brown:#70522F;
--wood:#362418;
--orange:#FF9900;
--e_green:#45A8B0;
--black:#000000;

--link_color:#3399cc;
--max-width:1280px;
--mincho:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
--icon: "Font Awesome 6 Pro";
}

.di_none { display:none; }

/*---------------------------------------------
btn
---------------------------------------------*/
.btn {}
.btn a {
background-color:var(--white);
border-color:var(--light_gray);
border-style:solid;
border-width:1px;
border-radius:25px;
display:flex;
padding:17px 30px;
position:relative;
}
.btn a:before {
background-image:url(../img/common/bg_logo_opacity.png);
background-repeat:no-repeat;
background-size:60px 95px;
content:"";
position:absolute;
top:50%;
right:20px;
margin-top:-48px;
height:95px;
width:60px;
}
.btn a:after {
content:"\f054";
color:var(--light_gray);
font-family:var(--icon);
font-weight:600;
right:13px;
top:50%;
margin-top:-5px;
position:absolute;
font-size:1.0rem;;
z-index:3; 
}
.btn a:hover {
cursor:pointer;
}

.btn.green a {
background-color:var(--green);
border:none;
color:var(--white);
font-weight:600;
}
.btn.green a:after {
color:var(--white);
}
.btn.green a:hover {
opacity:0.7;
}

.btn.brown a {
background-color:var(--brown);
border:none;
color:var(--white);
font-weight:600;
}
.btn.brown a:after {
color:var(--white);
}
.btn.brown a:hover {
opacity:0.7;
}

.btn.large a {
border-radius:50px;
display:flex;
font-size:1.6rem;
padding:30px 50px;
}

.btn > span {
background-color:var(--white);
border-color:var(--light_gray);
border-style:solid;
border-width:1px;
border-radius:25px;
display:flex;
padding:17px 30px;
position:relative;
}
.btn > span:after {
content:"\f054";
color:var(--light_gray);
font-family:var(--icon);
font-weight:600;
right:20px;
top:50%;
margin-top:-5px;
position:absolute;
font-size:1.0rem;;
z-index:3; 
}
.btn > span:hover {
cursor:pointer;
opacity:0.7;
}
.btn.large > span {
border-radius:50px;
display:flex;
font-size:1.6rem;
padding:30px 50px;
}

/*---------------------------------------------
modal
---------------------------------------------*/
.modal_box {
position:fixed;
width:60%;
max-width:100%;
margin:0;
padding:0;
text-align:center;
background:var(--white);
box-sizing:border-box;
z-index:121;
}
.modal_box .modal_box_cont > .modal_close {
position:absolute;
top:0;
right:0;
display:block;
width:47px;
line-height:47px;
text-align:center;
background:var(--gray);
}
.modal_box .modal_box_cont > .modal_close i {
color:var(--white);
font-size:1.6em;
line-height:47px;
vertical-align:bottom;
}
.modal_box .modal_box_cont > .modal_close:hover {
cursor:pointer;
}
.modal_bg {
position:fixed;
top:0;
left:0;
display:none;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.7);
z-index:120;
}
.modal_box .modal_box_cont {
background-color:var(--white);
padding:30px 30px 50px;
border-radius:6px;
position:relative;
}
.close.modal_close {
position:relative;
right:auto;
top:auto;
width:auto;
height:auto;
}
.close {
margin-top:50px;
}
.close .modal_close {
align-items:center;
background-color:var(--light_gray);
border-width:1px;
border-style:solid;
border-color:var(--light_gray);
border-radius:25px;
display:flex;
justify-content:center;
padding:10px;
position:relative;
right:auto;
top:auto;
width:auto;
height:auto;
}
.close .modal_close:hover {
cursor:pointer;
}
.close .modal_close i {
color:var(--gray);
font-size:1.6rem;
line-height:1.6;
}
.close .modal_close span {
font-size:1.6rem;
line-height:1.6;
padding-left:5px;
}

/*---------------------------------------------
animation
---------------------------------------------*/

/* fadeUp */
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}

/* fadeFromLeft */
.fadeFromLeft {
animation-timing-function:ease;
animation-name:fadeFromLeftAnime;
animation-delay:0.65s;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeFromLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }
  to {
    opacity: 1;
  transform: translateX(10px);
  }
}
.fadeFromLeftTrigger{
    opacity: 0;
}

/* fadeFromRight */
.fadeFromRight {
animation-timing-function:ease;
animation-name:fadeFromRightAnime;
animation-delay:0.65s;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeFromRightAnime{
  from {
    opacity: 0;
  transform: translateX(5vw);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}
.fadeFromRightTrigger{
    opacity: 0;
}