@charset "utf-8";
/* CSS Document */
a {
    text-decoration: none;
    color: inherit;
}

/*=========================================*/
/*　サブメニュー*/
/*=========================================*/
.sub_menu{
    margin: 40px 0px 40px auto;
}
.sub_menu ul{
    overflow: hidden;
    box-sizing: border-box;
}

.sub_menu ul li{
    float: left;
    display: inline-block;
    position: relative;
    margin: 0px 10px 0px 15px;
    font-size: 100%;
    font-weight: bold;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
}

.sub_menu ul li a:hover{
    color: #f05920;
    opacity: 1.0;
}

.sub_menu ul a{
    position: relative;
    display: inline-block;
    padding: 10px 7px 25px 17px;
    box-sizing: border-box;

}

.sub_menu ul a::before{
    content: "";
    position: absolute;
    display: block;
    top:35%;
    left: 3px;
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    width: 0px;
    height: 0px;
    border-left: 5px solid #000;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
.sub_menu ul a:hover::before{
    content: "";
    position: absolute;
    display: block;
    top:35%;
    left: 3px;
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    width: 0px;
    height: 0px;
    border-left: 5px solid #f05920;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: all 0.5s;

}

.sub_menu ul li#on{
    color: #f05920;

}
.sub_menu ul li#on a:hover{
    opacity: 1.0;
}
.sub_menu ul li#on::after{
    content: "";
    position: absolute;
    bottom: 15px;
    left: 0px;
    display: inline-block;
    width: 100%;
    height: 2px;
    background: #f05920;
}

.sub_menu ul li#on::before{
    content: "";
    position: absolute;
    bottom:5px;
    left: 50%;
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #f05920;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.sub_menu ul li#on a::before{
    content: "";
    position: absolute;
    display: block;
    top:35%;
    left: 3px;
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    width: 0px;
    height: 0px;
    border-left: 5px solid #f05920;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

@media screen and (max-width:640px) {
.sub_menu ul li {
    width: 100%;
    height: auto;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 10px;
    border: 2px solid rgba(225,128,106,1.00);
    border-radius: 5px;
    box-sizing: border-box;
    text-align: left;
}

.sub_menu ul #on{
    background:rgba(255,252,229,1.00);
}

.sub_menu ul li a{
    display: block;
    width: 100%;
    height: auto;
    margin: 0px auto 0px 0px;
    padding: 20px 0px 20px 20px; 
}
.sub_menu ul li#on::after,
.sub_menu ul li#on::before{
    content:none;
}

.sub_menu ul li a::before,
.sub_menu ul li#on a::before{
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    
}
.sub_menu ul a:hover::before{
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#main_area{
    display: flex;
    flex-direction: column;   
}
.sub_menu{
    order: 2;
}
.main_contetn{
    order: 1;
}
}

/*=========================================*/
/*　メイン*/
/*=========================================*/
.contents{
    margin: 88px auto 0px auto;
    padding: 0px 0px 0px 0px;
}

.main_img{
    width: 100%;
    height: auto;
}
.main_img_sp{
    display: none;
}
.main_img img{
    width: 100%;
    height: auto;
}

.sub_title{
    padding: 20px 25px 20px 25px;
    background: #fea405;
    font-size: 150%;
    font-weight: bold;
    text-align: left
}

/*content*/
.block_title{
    margin: 15px auto 5px auto;
    text-align: left;
    font-size: 160%;
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 135%;
    color: #ff5913;
}
.content_arrange{
    overflow: hidden
}
.img_area{
    max-width: 350px;
    width: calc(100% / 3);
    height: auto;
    float: left;
    padding: 1em 1em 1em 10px;
}
.img_inner{
	margin: 0px 0px 10px 0px;
}

.img_area img{
    width: 100%;
    height: auto;
}
.text_area{
    padding: 5px 10px 5px 10px;
}

/*waku*/
.content_arrange02{
    position:relative; 
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    max-width: 1000px;
    margin: 30px auto 60px auto;
    padding: 30px 50px 40px 50px;
    border: medium solid #fea404;
    border-radius: 10px;
}
.content_arrange02 img{
    max-width: 730px;
    width: 100%;
    height: auto;
}
.text_area02{
    width: 80%;
    padding: 10px;
    text-align: left;
}
.img_area03{
    width: 100%;
    height: auto;
    padding: 20px 0px 0px 0px;
}
.img_area02{
    width: auto;
	padding: 15px 0px 0px 0px;
}
.text_bold{
    margin: 15px auto 5px auto;
    text-align: left;
    font-size: 140%;
    font-weight: 900;
    letter-spacing: -0.01em;
}

@media screen and (max-width:1100px) {
.contents{
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px;
}

.sub_title{
    padding: 15px 20px 15px 20px;
    background: #fea405;
    font-size: 135%;
    font-weight: bold;
    text-align: left;
}
/*waku*/
.content_arrange02{
  margin: 30px auto 60px auto;
  padding: 15px 20px 30px 20px;
  border: medium solid #fea404;
  border-radius: 10px;
}
}
@media screen and (max-width: 960px){
.contents {
    margin: 0px auto 0px auto;
}
}
@media screen and (max-width:640px) {
.main_img{
    display: none;
}
.main_img_sp{
    display: block;
    width: 100%;

}
.main_img_sp img{
    width: 100%;
    height: auto;
}

/*content*/
.img_area{
    max-width: none;
    width: 100%;
    height: auto;
    float: none;
    padding: 0em 0em 1em 0em;
}
.sub_title{
    padding: 15px 15px 15px 15px;
    background: #fea405;
    font-size: 110%;
    font-weight: bold;
    text-align: left;
}
.block_title{
    margin: 5px auto 5px 0px;
    padding: 0px 0px 0px 10px;
}
.block {
  margin: 15px auto 30px auto;
}

.text_area{
    padding: 0px 0px 0px 0px;
}

/*waku*/
.text_bold{
	width: 82%;
    margin: 15px 0px 5px 0px;
    text-align: left;
    font-size: 140%;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.content_arrange02{
    display:block;
}
.text_area02{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 230px;
    padding: 10px;
    text-align: left;
}
.text_area02 p.text{
    width: 80%;
}
.img_area03{
    width: 100%;
    height: auto;
    padding: 15px 0px 0px 0px;
}
.img_area02{
    position: absolute;
    right: 15px;
    bottom: 35%;
    width: 20%;
	padding: 0px 0px 0px 0px;

}
}