﻿

.linkStyle{
    color:#bf9d74;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}
.font_300per {
    font-size: -webkit-calc(3rem);
    font-size: calc(3rem);
}
.mg_b-80px{
    margin-bottom:80px;
}


/*--all page---------------------------
-------------------------------------*/

body{
    font-size:18px;
}
#body{
    overflow:hidden;
}
#loader img{
    width:400px!important;
}

#header.headtrans,
#logo a{
    background-color:#322710!important;
}
#logo a{
    width:300px!important;
}

#pc_nav li a{
    color:#2f1a14;
}
#header.headtrans #pc_nav li a{
    color:#fff!important;
}
#pc_nav .contact_bt a{
    border:2px solid #5a4416;
    border-radius:5px;
    background-color: #00b900!important;
    color:white;
}
#pc_nav .contact_bt a:hover{
    background-color:#00b900;
    opacity:0.7;
}

#pc_nav .contact_bt img{
    width:30px;
    height:30px;
}
#page_top a{
    color: #876621;
}
#page_top .scroll_u{
    background-color: #876621;
}
.footer_nav li a{
    color: #5a4416;
}
#footer{
    display:block;
    background-color:#322710;
}
#footer .footer_wrap{
    width:80%!important;
    margin:auto;
}
#footer #logo2{
    width:400px;
    margin-bottom:0;
}

#footer .tel_bt{
    display:none;
}
#footer .contact_bt a:hover{
    color: #5a4416;
}

/*--top page---------------------------
-------------------------------------*/
#main_img{
    height:auto!important;
}
.main_txt img{
    width:40vw;
}
.intro_sub1 .muryou{
    font-size:6rem;
}
.intro_sub2 .yokujitsu{
    font-size: 3.2rem;
    line-height: 1.2;
}
.con1_box{
    margin:10px;
}
.con1_bg{
    border-radius:10px;
    border:3px solid #5a4416;
}
.con1_title img{
    width:auto;
}
#contents2 .con2_box,
#contents1_2 .con1_box,
#contents2_2 .con2_box{
    margin:10px;
}
#contents2 .con2_bg,
#contents1_2 .con1_bg,
#contents2_2 .con2_bg{
    top: 0;
    left: 0;
    border-radius:10px;
    border:3px solid #5a4416;
    background: linear-gradient(to bottom right, rgb(249, 234, 108), rgb(253, 250, 229));
}
#top_cms .cms_box .pd_t-100px{
    /*background-color: #fdfae5;*/
    background-size: auto auto;
    background-color: rgba(251, 247, 217, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(253, 250, 229, 1) 10px, rgba(253, 250, 229, 1) 20px );
}
#top_cms .cms_title{
    font-size:2.5rem;
}
#top_cms .cms_sub_title{
    color: #5a4416;
}
#top_cms .hvr_more_span{
    border-color:#5a4416;
    border-radius:5px;
}
.more a .more_bg{
    background-color:#5a4416;
}
.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
   max-height: 15em;
  -webkit-line-clamp: 10;
  line-height: 1.5em;
}
/*下からフェードイン*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


/*--under page---------------------------
-------------------------------------*/
#page_title{
    color: #5a4416;
    background-size: auto auto;
    background-color: rgba(251, 247, 217, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(253, 250, 229, 1) 10px, rgba(253, 250, 229, 1) 20px )!important;
}
#page_title .page_title_gradient{
    background:transparent!important;
}
#page_title .page_title_bg{
    opacity:0.2;
}
#page_title h2{
    font-size:2rem;
}
#page_title p{
    font-size:1.5rem;
}

.u_page{
    background-color: #fdfae5!important;
}
.u_page .contents_wrap{
    border:2px solid #5a4416;
    border-radius:10px;
}
.cate_list li a{
    color:white;
    border:2px solid #5a4416;
    border-radius:5px;
}
.cate_list li a:hover{
    background-color: #5a4416;
}

.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*cms_5-c*/
.cms_5-c .box_title1,.cms_5-c .box_txt1,
#cms_5-c .box_title1,#cms_5-c .box_txt1 {
	position: relative;
	padding: 0.5em;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	border-radius:30px;
}
.cms_5-c .box_title1,
#cms_5-c .box_title1 {
	margin: 0 3em 1em 3em;
	background: #fdf1b7;
}
.cms_5-c .box_txt1,
#cms_5-c .box_txt1 {
	margin: 0 3em 3em 3em;
	background: #f7a74e;
	color:white;
}
/* 吹き出し▶︎ */
.cms_5-c .box_title1::before,.cms_5-c .box_txt1::before,
#cms_5-c .box_title1::before,#cms_5-c .box_txt1::before{
	position: absolute;
	z-index: 0;
	top: 1em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し▶︎ */
.cms_5-c .box_title1::before,
#cms_5-c .box_title1::before {
	left: -0.3em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #fdf1b7 transparent transparent;
}
/* 答え吹き出し▶︎ */
.cms_5-c .box_txt1::before,
#cms_5-c .box_txt1::before {
    left:auto;
	right: -0.3em;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #f7a74e;
}
/* ?!アイコン */
.cms_5-c .box_title1::after,.cms_5-c .box_txt1::after,
#cms_5-c .box_title1::after,#cms_5-c .box_txt1::after {
	content:'';
	position: absolute;
	top: 0;
	display: inline-block;
	width: 80px;
	height: 80px;
    background-repeat:no-repeat;
    background-size:100% 100%;
}
/* ?アイコン */
.cms_5-c .box_title1::after,
#cms_5-c .box_title1::after {
	left: -5.5em;
	margin: 0 0.5em 0 0;
	background-image:url(./Dup/img/q.png);
	
}
/* !アイコン */
.cms_5-c .box_txt1::after,
#cms_5-c .box_txt1::after {
	right: -6.5em;
	margin: 0 0 0 0.5em;
	background-image:url(./Dup/img/a.png);
}

#page10 .cate_box a:hover{
    color: #f7a74e;
}
#header .menu_stick span,
#header .menu_stick.stick_trans span:first-of-type, 
#header .menu_stick.stick_trans span:last-of-type{
    background-color: #fff;
}
#header .menu_stick.stick_trans span:first-of-type,
#header .menu_stick.stick_trans span:last-of-type{
    background-color:#2f1a14;
}
#sp_nav li a{
    color: #5a4416;
}
#sp_nav li:last-of-type{
    border:0;
}
#sp_nav li:last-of-type a{
    display:none;
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#header, #header.headtrans{
    background-color:#322710!important;
}
#header .menu_stick{
    right:30px;
}
#pc_nav .contact_bt{
    margin-right:60px;
}

#main_img{
    height:56vw!important;
}

.main_txt img {
    width: 50%;
}
.intro_sub1 .muryou{
    font-size:5rem;
}
#footer .map {
    height: 0;
}
#page_title{
    padding-top:50px;
}
.cms_5-c .box_title1, .cms_5-c .box_txt1,
#cms_5-c .box_title1, #cms_5-c .box_txt1{
    padding:1em;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    
.pd_r-60px_sp{
    padding-right:60px;
}
#pc_nav .contact_bt {
    margin-right: 50px;
}
#header .menu_stick {
    right: 15px;
}

#loader img {
    width: 300px!important;
}
#logo a {
    width: 150px!important;
}
#logo a img{
    width:100%!important;
}
#main_img .main_txt_wrap {
    bottom: -7vw;
    right: -26vw;
}
.main_txt img {
    width: 63%;
}
.intro_sub1 .muryou{
    font-size:4.5rem;
}
.intro_sub2 .yokujitsu {
    font-size: 2.2rem;
}
.con3_title{
    font-size:1.8rem;
}
#top_cms .cms_sub_title{
    top:-205px;
}
#footer #logo2 {
    width: 250px;
}

.cms_5-c .box_title1,
#cms_5-c .box_title1{
    margin: 0 0em 1em 3em;
}

.cms_5-c .box_txt1,
#cms_5-c .box_txt1{
        margin: 0 3em 3em 0;
}
.cms_5-c .box_title1::after, .cms_5-c .box_txt1::after,
#cms_5-c .box_title1::after, #cms_5-c .box_txt1::after{
    background-size:70% 70%;
}
.cms_5-c .box_txt1::after, 
#cms_5-c .box_txt1::after{
    right:-8.5em;
}
.contact_bt_sp{
    z-index:2;
}
.contact_bt_sp a{
    background-color: #322710!important;
}
.contact_bt_sp img{
    width:30px;
    height:30px;
}
#page_top{
    right:10px;
    bottom:30px;
}
}


/* ---------- スマートフォン ---------- */
@media screen and (max-width: 568px){
#header{
    padding-left:10px;
}
#logo a {
    width: 130px!important;
}
#pc_nav .contact_bt img{
    width:25px;
    height:25px;
}
   
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
.cms_5-c .box_title1,
#cms_5-c .box_title1 {
    padding-top:20px;
}
.cms_5-c .box_txt1,
#cms_5-c .box_txt1{
    padding-top:15px;
}
}


