@charset "UTF-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 768px) {

.hed_wrap{margin: 0 auto;}
    
.mt40{margin-top: 40px;}
    
#philosophy {position:relative; min-width: 1400px;}

#philosophy .section_wrap{margin: 0 auto 160px;}

#philosophy .top_img{width: 100%; height: 400px;}
    
#philosophy .top_img img{width: 100%; object-fit: cover; height: 500px;}

#philosophy .cont01{margin: 250px auto;}
    
#philosophy .cont01 .top_text{margin-left: 10%; font-weight: 700; font-size: 1.2rem;}
    
#philosophy .cont01 ul{margin: 100px 10% 150px 10%;}
#philosophy .cont01 ul li{border-bottom: solid 1px #ddd; padding-bottom: 30px; position: relative;}
#philosophy .cont01 ul li:nth-child(n+2){margin-top: 40px;}
#philosophy .cont01 ul li h3{font-size: 1.5rem; font-size: 1rem; background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
#philosophy .cont01 ul li h3 span{display: block; font-size: 2.1rem; font-family: "Marcellus", serif; font-weight: 900; } 
#philosophy .cont01 ul li a:hover .hover_img{opacity: 1;}
#philosophy .cont01 ul li .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 100px; top: -70px;}
#philosophy .cont01 ul li:nth-child(2) .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 100px; top: -100px;}
#philosophy .cont01 ul li:nth-child(3) .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 100px; top: -30px;}
#philosophy .cont01 ul li a:hover .li_content{opacity: .7; transition: opacity 0.3s ease;}
    
#philosophy .cont01 ul li .item_box{margin: 20px 0 0 0;}
#philosophy .cont01 ul li .item_box .item{font-size: 1rem; position: relative; padding-left: 45px; font-weight: 500; margin-top: 15px;}
#philosophy .cont01 ul li .item_box .item.first:before{content: "01."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.second:before{content: "02."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.third:before{content: "03."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.four:before{content: "04."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.five:before{content: "05."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}

    
#philosophy .cont02 #item01{padding-top: 150px; margin-top: -150px;}
#philosophy .cont02 #item02{padding-top: 150px; margin-top: -150px; margin-top: 60px;}
#philosophy .cont02 #item03{padding-top: 150px; margin-top: -150px; margin-top: 60px;}
    
    
#philosophy .cont02{margin-top: 200px;}
#philosophy .cont02 .flex_wrap{width: 100%; display: flex; align-items: center; gap: 5%; padding-right: 5%; box-sizing: border-box; position: relative;}
#philosophy .cont02 .flex_wrap_reverse{width: 100%; display: flex; align-items: center; gap: 3.5%; padding-left: 5%; box-sizing: border-box; position: relative; flex-direction: row-reverse;}

    
#philosophy .cont02 .item_tit{font-size: 1.5rem; font-size: 1rem; background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-align: center;}  
#philosophy .cont02 .item_tit span{display: block; font-size: 2.1rem; font-family: "Marcellus", serif; font-weight: 900; } 
#philosophy .cont02 .flex_box .text_box{width: 45%;box-sizing: border-box;}
#philosophy .cont02 .flex_box .text_box h4{font-size: 1.5rem;}
#philosophy .cont02 .flex_box .text_box h4 .num{background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 10px;}
#philosophy .cont02 .flex_box .text_box .text{margin-top: 30px; font-size: 1.1rem; line-height: 2; letter-spacing: 0.5px;}
#philosophy .cont02 .flex_box .img_box{width: 55%;}   
    
    
    

}
/*sp*/
@media only screen and (max-width: 767px) {
.hed_wrap{margin: 0 auto;}
    
.mt40{margin-top: 40px;}
    
#philosophy {position:relative;}

#philosophy .section_wrap{margin: 0 auto 80px;}

#philosophy .top_img{width: 100%;}
    
#philosophy .top_img img{width: 100%; object-fit: cover; height: 300px;}

#philosophy .cont01 { width: 90%; margin: 100px auto; }
    
#philosophy .cont01 .top_text { font-weight: 700; font-size: 1.2rem; }
    
#philosophy .cont01 ul { margin: 60px 0 0; }
#philosophy .cont01 ul li{border-bottom: solid 1px #ddd; padding-bottom: 30px; position: relative;}
#philosophy .cont01 ul li:nth-child(n+2){margin-top: 40px;}
#philosophy .cont01 ul li h3{font-size: 1.5rem; font-size: 1rem; background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#philosophy .cont01 ul li h3 span{display: block; font-size: 2.1rem; font-family: "Marcellus", serif; font-weight: 900; } 
#philosophy .cont01 ul li a:hover .hover_img{opacity: 1;}
#philosophy .cont01 ul li .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 0px; top: -60px;}
#philosophy .cont01 ul li:nth-child(2) .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 0px; top: -60px;}
#philosophy .cont01 ul li:nth-child(3) .hover_img{opacity: 0; transition: opacity 0.3s ease; position: absolute; width: 33%; right: 0px; top: -60px;}
#philosophy .cont01 ul li a:hover .li_content{opacity: .7; transition: opacity 0.3s ease;}
    
#philosophy .cont01 ul li .item_box{margin: 20px 0 0 0;}
#philosophy .cont01 ul li .item_box .item{font-size: 1rem; position: relative; padding-left: 45px; font-weight: 500; margin-top: 15px;}
#philosophy .cont01 ul li .item_box .item.first:before{content: "01."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.second:before{content: "02."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.third:before{content: "03."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.four:before{content: "04."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}
#philosophy .cont01 ul li .item_box .item.five:before{content: "05."; position: absolute; left: 0; top: -4px; font-size: 1.2rem; font-weight: 700;}

    
#philosophy .cont02 #item01{padding-top: 150px; margin-top: -150px;}
#philosophy .cont02 #item02{ margin-top: 100px;}
#philosophy .cont02 #item03{ margin-top: 100px;}
    
    
#philosophy .cont02{ width: 90%; margin: 100px auto; }
#philosophy .cont02 .flex_wrap{width: 100%; position: relative;}
#philosophy .cont02 .flex_wrap_reverse{width: 100%; position: relative;}

    
#philosophy .cont02 .item_tit{font-size: 1.5rem; font-size: 1rem; background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-align: center;}  
#philosophy .cont02 .item_tit span{display: block; font-size: 2.1rem; font-family: "Marcellus", serif; font-weight: 900; } 
#philosophy .cont02 .flex_box .text_box{box-sizing: border-box;}
#philosophy .cont02 .flex_box .text_box h4{font-size: 1.2rem; margin-top: 20px;}
#philosophy .cont02 .flex_box .text_box h4 .num{background: linear-gradient(105deg,#7B5825 33.02%,#8A6B1C 54.88%,#8B5608 81.27%); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 10px;}
#philosophy .cont02 .flex_box .text_box .text{margin-top: 20px; font-size: 0.9rem; line-height: 2; letter-spacing: 0.5px;}
#philosophy .cont02 .flex_box .img_box { margin-top: 50px; } 



}