@charset "utf-8";

/* スタイルシート
　  Hirama Inc.
  
-------------------------------------------------------------------------------------*/

body.home {
background-color: #F7F4F0;
}

/*************************************************************************************
**************************************************************************************

  mainVisual

**************************************************************************************
**************************************************************************************/

.home #mainVisual {
width: 100%;
position: relative;
overflow-x: hidden;
}

@media only screen  and (min-width: 951px){
.home #mainVisual {
margin-top: 100px;
}
}

@media only screen  and (min-width: 601px) and (max-width: 950px){
.home #mainVisual {
margin-top: 80px;
}
}

@media only screen  and (max-width: 600px){
.home #mainVisual {
margin-top: 60px;
}
}

.home #mainVisual .outer {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;

display: flex;
align-items: center;

}

.home #mainVisual .inner {
width: 100%;
margin: 0 auto;
}

@media only screen  and (min-width: 1151px){
.home #mainVisual .inner {
max-width: 1100px;
}
}

@media only screen  and (max-width: 1150px){
.home #mainVisual .inner {
padding: 0 3%;
}
}

.home #mainVisual .inner .text {
position: relative;
z-index: 1;
}

@media only screen  and (min-width: 1151px){
.home #mainVisual .inner .text {
display: flex;
flex-wrap: wrap; 
flex-direction: column;
justify-content: center;
}
}

@media only screen  and (max-width: 1150px){
.home #mainVisual .inner .text {
display: flex;
flex-wrap: wrap; 
flex-direction: column;
justify-content: center;
}
}

.home #mainVisual .inner .text h2 {
font-weight: bold;
color:#2A9245;
letter-spacing: .1em;
}

.home #mainVisual .inner .text h2 span {
color: #8C6239;
}

@media only screen and (min-width: 1151px){
.home #mainVisual .inner .text h2 {
font-size: 2.5rem;
}
}

@media only screen and (min-width: 701px) and (max-width: 1150px){
.home #mainVisual .inner .text h2 {
font-size: 2.3rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #mainVisual .inner .text h2 {
font-size: 2.5rem;
}
}

@media only screen and (max-width: 480px){
.home #mainVisual .inner .text h2 {
font-size: 1.5rem;
}
}

.home #mainVisual .photo {
}

@media only screen and (min-width: 1151px){
.home #mainVisual .photo {
position:relative;
left: calc(((100% - 1100px) / 2));
top: 0;
padding-left: 6rem;
}
}

@media only screen and (max-width: 1150px){
.home #mainVisual .photo {
position:relative;
left: calc(((100% - 94%) / 2));
bottom: 0;
padding-left: 6rem;
}
}

@media only screen and (max-width: 480px){
.home #mainVisual .photo {
padding-left: 5rem;
}
}

.home #mainVisual .photo img {
border-bottom-left-radius: 10px;
}


/*************************************************************************************
**************************************************************************************

  main

**************************************************************************************
**************************************************************************************/

.home #main {
width: 100%;
position: relative;
}

@media only screen  and (min-width: 1151px){
.home #main {
padding-top: 2rem;
}
}

@media only screen  and (max-width: 1150px){
.home #main {
padding-top: 2rem;
}
}

/*inner*/
.home #main .inner {
width: 100%;
margin: 0 auto;
}

@media only screen  and (min-width: 1151px){
.home #main .inner {
max-width: 1100px;
}
}

@media only screen  and (max-width: 1150px){
.home #main .inner {
padding: 0 3%;
}
}

/*align*/
.aligncenter {
text-align: center;
}

.alignleft {
text-align: left;
}

.alignright {
text-align: right;
}

/*block-ttl*/
.home #main .block-ttl {
font-weight: bold;
color: #2A9245;
}

@media only screen and (min-width: 1001px){
.home #main .block-ttl {
font-size: 2.0rem;
}
}

@media only screen and (min-width: 701px) and (max-width: 1000px){
.home #main .block-ttl {
font-size: 1.6rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block-ttl {
font-size: 1.8rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block-ttl {
font-size: 1.4rem;
}
}

.home #main .box-ttl {
font-weight: bold;
color:#8C6239;
line-height: 1.5;
}

@media only screen and (min-width: 1151px){
.home #main .box-ttl {
font-size: 1.8rem;
}
}

@media only screen and (min-width: 701px) and (max-width: 1150px){
.home #main .box-ttl {
font-size: 1.5rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .box-ttl {
font-size: 1.8rem;
}
}

@media only screen and (max-width: 480px){
.home #main .box-ttl {
font-size: 1.2rem;
}
}

.home #main .block-ttl + p {}

@media only screen and (min-width: 481px){
.home #main .block-ttl + p {
text-align: center;
}
}

@media only screen and (max-width: 480px){
.home #main .block-ttl + p {}
}

/*btn*/
.home #main .btn {}

.home #main .btn a {
display: block;
margin: 0 auto;
position: relative;
background-color: #37B572;
color: #FFF;
border-radius: 5px;
border: #37B572 solid 2px;
}

@media only screen and (min-width: 701px){
.home #main .btn a {
padding: .4rem .5rem;
max-width: 14rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .btn a {
padding: .5rem .5rem;
max-width: 20rem;
}
}

@media only screen and (max-width: 480px){
.home #main .btn a {
padding: .4rem .5rem;
max-width: 100%;
}
}

.home #main .btn a:hover {
background-color: #BCE4CC;
border-color: #BCE4CC;
}

.home #main .btn a span {
position: relative;
}

@media only screen and ( min-width : 701px ){
.home #main .btn a span {
padding-right: 1.2rem;
}
}

@media only screen and ( min-width : 551px )and ( max-width : 700px ) {
.home #main .btn a span {
padding-right: 2rem;
}
}

@media only screen and ( min-width : 481px )and ( max-width : 550px ) {
.home #main .btn a span {
padding-right: 2rem;
}
}

@media only screen and ( max-width : 480px ) {
.home #main .btn a span {
padding-right: 1.25rem;
padding-left: 1rem;
}
}

.home #main .btn a span::before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 15px;
height: 2px;
background: #FFF;
/*transition: .3s;*/
transition: .3s right ease-in-out;
}

.home #main .btn a:hover span::before{
right: -10px;
}

.home #main .btn a span::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-135deg);
/*transition: .3s;*/
transition: .3s right ease-in-out;
width: 10px;
height: 10px;
}

.home #main .btn a:hover span::after{
right: -10px;
}

.home #main .roundbtn {}

.home #main .roundbtn a {
display: block;
margin: 0 auto;
position: relative;
background-color:transparent;
color: #37B572;
border-radius: 50px;
border: #37B572 solid 2px;
}

@media only screen and (min-width: 701px){
.home #main .roundbtn a {
padding: .4rem .5rem;
max-width: 20rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .roundbtn a {
padding: .5rem .5rem;
max-width: 20rem;
}
}

@media only screen and (max-width: 480px){
.home #main .roundbtn a {
padding: .4rem .5rem;
max-width: 100%;
}
}

.home #main .roundbtn a:hover {
background-color: #37B572;
border-color: #37B572;
color: #FFF
}

.home #main .roundbtn a span {
position: relative;
}

@media only screen and ( min-width : 701px ){
.home #main .roundbtn a span {
padding-right: 1.2rem;
}
}

@media only screen and ( min-width : 551px )and ( max-width : 700px ) {
.home #main .roundbtn a span {
padding-right: 2rem;
}
}

@media only screen and ( min-width : 481px )and ( max-width : 550px ) {
.home #main .roundbtn a span {
padding-right: 2rem;
}
}

@media only screen and ( max-width : 480px ) {
.home #main .roundbtn a span {
padding-right: 1.25rem;
padding-left: 1rem;
}
}

.home #main .roundbtn a span::before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 15px;
height: 2px;
background: #37B572;
/*transition: .3s;*/
transition: .3s right ease-in-out;
}

.home #main .roundbtn a:hover span::before{
right: -10px;
background: #FFF;
}

.home #main .roundbtn a span::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-left: 2px solid #37B572;
border-bottom: 2px solid #37B572;
transform: rotate(-135deg);
/*transition: .3s;*/
transition: .3s right ease-in-out;
width: 10px;
height: 10px;
}

.home #main .roundbtn a:hover span::after{
right: -10px;
border-left-color: #FFF;
border-bottom-color: #FFF;
}


/*************************************************************************************

  section01

**************************************************************************************/

.home #main .section01 {
}

@media only screen and ( min-width : 701px ){
.home #main .section01 {
margin-bottom: 4.5rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section01 {
padding: 0 3%;
margin-bottom: 3rem;
}
}

.home #main .section01 .inner {}

@media only screen and ( min-width : 701px ){
.home #main .section01 .inner {}
}

@media only screen and ( max-width : 700px ){
.home #main .section01 .inner {
padding: 0 0;
}
}

.home #main .section01 .block-ttl {}

@media only screen and ( min-width : 701px ){
.home #main .section01 .block-ttl {
margin-bottom: 4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section01 .block-ttl {
margin-bottom: 2rem;
}
}

.home #main .section01 .box-ttl {
margin-bottom: 1rem;
}

.home #main .section01 .box {}

@media only screen and ( min-width : 701px ){
.home #main .section01 .box {
position: relative;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
padding: 2rem 2rem;
z-index: 0;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section01 .box {
margin-top: 2rem;
}
}

.home #main .section01 .box_inside {
}

@media only screen and ( min-width : 1151px ){
.home #main .section01 .box_inside {
padding-left: calc(50% + 1rem);
min-height: 14rem;
}
}

@media only screen and ( min-width : 701px )and ( max-width : 1150px ) {
.home #main .section01 .box_inside {
padding-left: 50%;
}
}

.home #main .section01 .btn {
text-align: center;
margin-top: 2rem;
}

.home #main .section01 .photo {}

@media only screen and ( min-width : 1151px ){
.home #main .section01 .photo {
height: 60%;
}
}

@media only screen and ( min-width : 1031px )and ( max-width : 1151px ) {
.home #main .section01 .photo {
height: 230px;
}
}

@media only screen and ( min-width : 701px )and ( max-width : 1030px ) {
.home #main .section01 .photo {
height: 60%;
}
}

@media only screen and ( min-width : 701px ){
.home #main .section01 .photo {
position: absolute;
left: 0;
top: 5.5rem;
z-index: 1;
width: 48%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
background-color: #DDD;
}
}

@media only screen and ( min-width : 481px )and ( max-width : 700px ) {
.home #main .section01 .photo {
height: 60%;
}
}

@media only screen and ( max-width : 480px ) {
.home #main .section01 .photo {
height: 60%;
}
}

.home #main .section01 .photo img {
}

@media only screen and ( min-width : 701px )and ( max-width : 1030px ) {
.home #main .section01 .photo img {
height: 100%;
max-width: none;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section01 .photo img {
border-radius: 10px;
}
}

/*************************************************************************************

  section02

**************************************************************************************/

.home #main .section02 {
margin-bottom: 3rem;
}

.home #main .section02 .block-ttl {}

@media only screen and ( min-width : 701px ){
.home #main .section02 .block-ttl {
margin-bottom: 4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section02 .block-ttl {
margin-bottom: 2rem;
}
}

.home #main .section02 .roundbtn {
text-align: center;
margin-top: 2rem;
}

.home #main .section02 .tabContainer {
margin-top: 2rem;
}

.home #main .section02 .tabContainer .tab_inner {
width:100%;
display: flex;
flex-wrap: wrap; 
gap: 1rem .99rem;
}

.home #main .section02 .tabContainer .tab_inner .item {
display: flex;
flex-direction: column;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.2);
}

@media only screen  and (min-width: 701px){
.home #main .section02 .tabContainer .tab_inner .item {
width: calc((100% - 2rem) / 3);
}

_::-webkit-full-page-media, _:future, :root .home #main .section02 .tabContainer .tab_inner .item {
margin-right: .99rem;
}

_::-webkit-full-page-media, _:future, :root .home #main .section02 .tabContainer .tab_inner .item:nth-of-type(3n) {
margin-right: 0;
}

}

@media only screen and (max-width: 700px){
/*Edge*/
@supports (-ms-ime-align: auto){
.home #main .section02 .tabContainer .tab_inner .item {
margin-bottom: 1rem;
}
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .section02 .tabContainer .tab_inner .item {
width: calc((100% - 2rem) / 3);
}
}

@media only screen and (max-width: 480px){
.home #main .section02 .tabContainer .tab_inner .item {
width: calc((100% - 1rem) / 2);
}
}

.home #main .section02 .tabContainer .tab_inner .item .photo {
background-color: #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;

padding-top: 60%;
overflow: hidden;
position: relative;
}

.home #main .section02 .tabContainer .tab_inner .item .photo img {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

position: absolute; 
top: 0; 
left: 0;
width: 100%; 
height: auto;
transform: scale(1);
transition: .3s ease-in-out;
}

.home #main .section02 .tabContainer .tab_inner .item.newstyle img {
transform: scale(1.3);
}

.home #main .section02 .tabContainer .tab_inner .item .text {
padding: .5rem .8rem .8rem;
display: flex;
flex-direction: column;
height: 100%;
}

.home #main .section02 .tabContainer .tab_inner .item .text .item-ttl {
margin: .4rem 0;
display: flex;
}

.home #main .section02 .tabContainer .tab_inner .item .text .date {
color: #39B549;
font-size: 85%;
}

.home #main .section02 .tabContainer .tab_inner .item .text p {
margin-bottom: 1rem;
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag_wrapper {
width: 100%;
margin: auto 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag {
width: auto;
color: #FFF;
line-height: 1;
margin-left: .2rem;
}

@media only screen  and (min-width: 701px){
.home #main .section02 .tabContainer .tab_inner .item .text .tag {
font-size: .8rem;
padding: .3rem .5rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .section02 .tabContainer .tab_inner .item .text .tag {
font-size: 1rem;
padding: .3rem .5rem .4rem;
}
}

@media only screen and (max-width: 480px){
.home #main .section02 .tabContainer .tab_inner .item .text .tag {
font-size: .8rem;
padding: .3rem .5rem;
}
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_a {
background-color: #F8A94B; 
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_b {
background-color: #F36C72; 
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_c {
background-color: #C987CC; 
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_d {
background-color: #5CA4D4; 
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_e {
background-color: #54BCE8; 
}

.home #main .section02 .tabContainer .tab_inner .item .text .tag.tag_cat_f {
background-color: #3BBAB1; 
}


/*************************************************************************************

  section03

**************************************************************************************/

.home #main .section03 {
margin-bottom: 3rem;
}

.home #main .section03 .block-ttl {}

@media only screen and ( min-width : 701px ){
.home #main .section03 .block-ttl {
margin-bottom: 4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .block-ttl {
margin-bottom: 2rem;
}
}

.home #main .section03 .box {
position: relative;
display: flex;
flex-wrap: wrap; 
}

@media only screen and ( min-width : 701px ){
.home #main .section03 .box {
flex-direction: row-reverse;
position: relative;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
padding: 2rem 2rem;
z-index: 0;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .box {
margin-top: 2rem;
}
}

.home #main .section03 .box .photo {}

@media only screen and ( min-width : 701px ){
.home #main .section03 .box .photo {
max-width: 380px;
margin-right: -4rem;
margin-top: -4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .box .photo {
margin-bottom: 1.5rem;
}
}

.home #main .section03 .box .photo img {
border-radius: 10px;
}

.home #main .section03 .box .text {}

@media only screen and ( min-width : 701px ){
.home #main .section03 .box .text {
padding-right: 1rem;
width: auto;
flex: 1;
display: flex;
flex-direction: column;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .box .text {
}
}

.home #main .section03 .box .text p {}

@media only screen and ( min-width : 701px ){
.home #main .section03 .box .text p {
margin-bottom: 1.5rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .box .text p {}
}

.home #main .section03 .btn {
text-align: center;
}

@media only screen and ( min-width : 701px ){
.home #main .section03 .btn {
margin-top: auto;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section03 .btn {
margin-top: 1.5rem;
}
}


/*************************************************************************************

  section04

**************************************************************************************/

.home #main .section04 {
margin-bottom: 3rem;
}

.home #main .section04 .block-ttl {}

@media only screen and ( min-width : 701px ){
.home #main .section04 .block-ttl {
margin-bottom: 4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .block-ttl {
margin-bottom: 2rem;
}
}


.home #main .section04 .box {
position: relative;
display: flex;
flex-wrap: wrap; 
}

@media only screen and ( min-width : 701px ){
.home #main .section04 .box {
flex-direction: row;
position: relative;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
padding: 2rem 2rem;
z-index: 0;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .box {
margin-top: 2rem;
}
}

.home #main .section04 .box .photo {}

@media only screen and ( min-width : 701px ){
.home #main .section04 .box .photo {
max-width: 380px;
margin-left: -4rem;
margin-top: -4rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .box .photo {
margin-bottom: 1.5rem;
}
}

.home #main .section04 .box .photo img {
border-radius: 10px;
}

.home #main .section04 .box .text {}

@media only screen and ( min-width : 701px ){
.home #main .section04 .box .text {
padding-left: 1rem;
width: auto;
flex: 1;
display: flex;
flex-direction: column;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .box .text {
}
}

.home #main .section04 .box .text p {}

@media only screen and ( min-width : 701px ){
.home #main .section04 .box .text p {
margin-bottom: 1.5rem;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .box .text p {}
}

.home #main .section04 .btn {
text-align: center;
}

@media only screen and ( min-width : 701px ){
.home #main .section04 .btn {
margin-top: auto;
}
}

@media only screen and ( max-width : 700px ){
.home #main .section04 .btn {
margin-top: 1.5rem;
}
}