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

/*仕事を知る*/


.work-h1{
	background-color:#95C530;
}
/*背景*/
.work-back1 {
	background-color:#D8F6FF;
	padding:150px 0 80px 0;
}
body{
	overflow-x: hidden;
}
/*ギャラリー*/
.gallery {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    /* --- 変更 --- */
    grid-template-rows: 18% 18% 18% 18% 18%; 
    grid-template-areas:
        "A B C"
        "A B F"
        "A E F"
        "D E H"
        "D G H";
    /* ------------ */
    gap: 10px;
	height:100%;
	width:100%;
}

.gallery .photoA {
    grid-area: A;
	margin:0;
}

.gallery .photoB {
    grid-area: B;
	margin:0;
}

.gallery .photoC {
    grid-area: C;
	margin:0;
}

.gallery .photoD {
    grid-area: D;
	margin:0;
}

.gallery .photoE {
    grid-area: E;
	margin:0;
}

.gallery .photoF {
    grid-area: F;
	margin:0;
}

.gallery .photoG {
    grid-area: G;
	margin:0;
}

.gallery .photoH {
    grid-area: H;
	margin:0;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	display:block;
	border-radius:10px;
	box-sizing: border-box;

}
/*ギャラリーここまで*/
.reform-content1-1 {
	margin-top:100px;
	margin-bottom:100px;
}
.reform-content1-intro {
	display:flex;
	justify-content:space-between;
}
.reform-content1-intro h2{
	border-top:solid 20px #95C530;
	width:27%;
	writing-mode: vertical-rl;
	padding:30px;
	font-size:60px;
	margin:0 50px auto 0;
	box-sizing: border-box;
}
.reform-content1-intro .reform-content1-img{
	width:70%;
	height:500px;
}
@media(max-width:1200px){
.reform-content1-intro h2{
	width:35%;
	margin:0 30px auto 0;
}
.reform-content1-intro .reform-content1-img{
	width:65%;
}	
}
@media(max-width:960px){
.reform-content1-intro h2{
	padding:30px 20px 0 30px;
	font-size:50px;
}
}
@media(max-width:768px){
.reform-content1-intro h2{
	font-size:40px;
	margin:0 20px auto 0;
}	
}
@media(max-width:640px){
.reform-content1-1 {
	margin-top:50px;
}
.reform-content1-intro h2 .br-1{
	display:none;
}
.reform-content1-intro .reform-content1-img{
	height:400px;
}	
.gallery {
    display: grid;
    grid-template-columns: 50% 48%;
    /* --- 変更 --- */
    grid-template-rows: 18% 18% 18% 18% 18%; 
    grid-template-areas:
        "A B"
        "A B"
        "A E"
        "D E"
        "D G";
    /* ------------ */
    gap: 10px;
	height:100%;
	width:100%;
}
}
@media(max-width:480px){
.reform-content1-intro h2{
	padding:30px 20px 0 30px;
	font-size:30px;
	margin:0 20px auto 0;
}	
}
.reform-content1-2 {
	width:90%;
	margin:auto;
}
.reform-content1-2 ul{
	padding-left:0;
	
}
.reform-content1-2 ul li{
	display:flex;
	justify-content:space-between;
	margin-bottom:100px;
}

.reason-img {
	width:30%;
}
.reason-img img{
	width:100%;
	border-radius:10px;
}

.reason-text {
	width:65%;
}
.reason-text h3{
	display:flex;
	font-size:25px;
	color:#417E13;
	margin:0;
}
.reason-text h3 span{
	width:100px;
	min-width:100px;
	margin-right:20px;
}
.reason-text h3 span img{
	width:100%;
	display:block;
}
@media(max-width:768px){
.reform-content1-2 ul li{
	display:flex;
	justify-content:space-between;
	margin-bottom:100px;
	flex-direction:column-reverse;
}	
.reason-img {
	width:100%;
}
.reason-text {
	width:100%;
}
}
@media(max-width:480px){
.reason-text h3{
	font-size:20px;
}
.reason-text h3 span{
	width:70px;
	min-width:70px;
	margin-right:15px;
}
.reform-content1-2 ul li{
	margin-bottom:50px;
}
}
/*リフォーム事例*/
.reform-content1-3 {
	background-color:#F5F4E4;
	padding:150px 0;
}
.reform-content1-3 {
  --mask:
    radial-gradient(84.97px at 50% 114px,#000 99%,#0000 101%) calc(50% - 76px) 0/152px 100%,
    radial-gradient(84.97px at 50% -76px,#0000 99%,#000 101%) 50% 38px/152px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.reform-content1-3 h2{
	color:#417E13;
	width:90%;
	max-width:1200px;
	margin:auto auto 30px auto;
	font-size:30px;
}
.reform-content1-3 ul{
	padding-left:0;
	width:90%;
	max-width:1200px;
	margin:auto;
}
.reform-content1-3 ul li{
	display:flex;
	justify-content:space-between;
	background-color:#fff;
	padding:45px 50px;
	border-radius:15px;
	margin-bottom:40px;
}

.example-img {
	display:flex;
	justify-content:space-between;
	width:40%;
}
.example-img .img1, .example-img .img2{
	width:49%;
}
.example-img span img{
	width:100%;
	display:block;
}
.example-img .bfaf{
	color:#417E13;
}
.example-text {
	width:55%;
}
.example-text h3{
	margin:0;color:#417E13;
}
@media(max-width:640px){
.reform-content1-3 {
	padding:120px 0;
}	
.reform-content1-3 ul li{
	display:flex;
	flex-direction:column-reverse;
}
.example-img {
	width:100%;
}
.example-text {
	width:100%;
}
}
@media(max-width:480px){
.reform-content1-3 {
	padding:120px 0 80px 0;
}	
.reform-content1-3 ul li{
	padding:30px 35px;
	margin-bottom:40px;
}
}