@charset "utf-8";

html {
	scroll-behavior: smooth;
}
body{
    background-image: url(../images/bg.jpg);
    background-attachment: fixed;
    background-size: 100vw;
	/* backgroung-size: cover; */
    /* max-width: 1920px; */
}
header{
    background-image: url(../images/top4.jpg);
    background-size: cover;
    height: 100vh;
    position: relative;
}
.menu{
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
h1 img{
    width: 300px;
}
.menu nav{
    width: 40%;
    z-index: 100;
}
.menu ul{
    display: flex;
    justify-content: space-around;
}
header ul li{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
}

.innertext {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    text-shadow: 2px 2px 2px rgb(254, 255, 239);
    display: flex;
    align-items: center;
    top: 0;
	padding-left: 50px;
}
h2 span{
    font-size: 50px;
    color: #dc143c;
}

/*ここから内容*/
/* info */
.info {
    -webkit-overflow-scrolling: touch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 600px;
    height: 13em;
    margin: 50px auto;
    overflow-y: scroll;
  }
  .information{
    margin: 50px auto 0;
    text-align: center;
    font-size: 50px;
    color: rgb(72, 76, 76);
    margin-bottom: 50px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 4px 4px 0px rgba(72, 76, 76, 1);
  }
  
  @media (min-width:768px) {
    .info {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
  
  .info dd,
  .info dt {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: .5em;
    padding-left: .5em
  }
  
  .info dt {
    font-style: normal;
    font-weight: initial
  }
  
  @media (min-width:768px) {
    .info dt {
      width: 12.5em;
      margin-bottom: .5em;
      border-bottom: 1px dotted #343a40
    }
  }
  
  .info dt:first-of-type {
    padding-top: .5em;
    border-top: 1px dotted #343a40
  }
  
  .info dt time {
    margin-right: .5em
  }
  
  .info dt span {
    box-sizing: border-box;
    display: inline-block;
    width: 7em;
    margin-right: .5em;
    padding: 0 .5em;
    background-color: #009688;
    color: #fff;
    font-size: .8em;
    line-height: 1.75;
    text-align: center
  }
  
  .info time {
    color: hwb(210 0% 84%)
  }
  
  .info dd {
    margin-left: 0;
    margin-bottom: .5em;
    border-bottom: 1px dotted #343a40
  }
  
  @media (min-width:768px) {
    .info dd {
      width: calc(100% - 12.5em)
    }
    .info dd:first-of-type {
      padding-top: .5em;
      border-top: 1px dotted #343a40
    }
  }
  
  .info dd:nth-of-type(-n+3) {
    position: relative
  }
.pop{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 4px 4px 0px rgba(72, 76, 76, 1);
}
.concept{
    max-width: 960px;
    margin: 0 auto;
}
.enm-concept{
    width: 100%;
    max-width: 800px;
    padding-top: 150px;
    margin: 0 auto;
}
.enm{
    font-size: 50px;
    margin-bottom: 16px;
}
.enm span{
    color: #F17CD7;
    text-shadow:
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red;
}
.enm-concept .text1{
    font-size: 30px;
    margin-bottom: 34px;
}
.enm-concept .text2{
    font-size: 20px;
    margin-bottom: 160px;
}
.works{
    display: flex;
    justify-content: space-between;
}
.works h3{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 40px;
    text-decoration-line: underline;
    text-decoration-thickness: 6px;
    text-decoration-color: rgb(255, 41, 41);
    text-align: center;
    margin-bottom: 20px;
    margin-top: 40px;
}
.works p{
    font-size: 19px;
    text-align: center;
    line-height: 2.5;
    margin-bottom: 40px;
}
.works1{
    width: 45%;
    background-color: #CCE7EB;
    border-radius: 20px;
    box-shadow: 10px 10px 10px 0px
}

.works2{
    width: 45%;
    background-color:#EDD6E7;
    border-radius: 20px;
    box-shadow: 10px 10px 10px 0px
}

#about{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 150px;
}
#about .ashirai{
    margin: 100px auto;    
}
#about .ashirai{
    width: 100px;
}
#about .rinen{
    display: flex;
    margin-bottom: 100px;
}
.rinen .woman{
    width: 50%;
    text-align: center;
}
.rinen .woman img{
    width: 200px;
}
.rinen .rinentext{
    width: 50%;
    align-self: center;
}
#about .rinentext span{
  font-size: 30px;
  color: #f01919;
}
#about .rinen .search_box{
    text-align: left;
    margin-top: 5%;
}
#about .rinentext img{
    width: 300px;
}
#about h2{
    margin: 0 auto;
    text-align: center;
    font-size: 60px;
    color: rgb(72, 76, 76);
    margin-bottom: 100px;
}
.concept2{
    display: flex;
    margin-bottom: 70px;
    text-align: right;
    align-items: center;
}
.concept3{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 70px;
    align-items: center;

}
#about .box1{
    width: 70%;
    margin: 0 20px;
}
#about .box2{
    width: 30%;
}
#about h3{
    font-size: 30px;
    margin-bottom: 10px;
}
#about p{
    font-size: 20px;
}
#access{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;    
}
#access h2{
    margin: 142px auto 70px;
    text-align: center;
    font-size: 60px;
    color: rgb(72, 76, 76);
}
#access .misora-add{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
#access .map{
    width: 55%;
}
#access .map iframe{
    width: 100%;
}
#access .add{
    width: 40%;
    background-color:#f5d6d6;
    border-radius: 20px;
}
.add img{
    width: 60%;
    margin: 30px 20%;
}
.add .addtext{
    width: 70%;
    margin: 0 auto;
    font-size: 21px;
}
.add .telfax{
    width: 80%;
    margin: 10px auto;
}
.add dl{
    display: flex;
    justify-content: space-between;
    font-size: 30px;
}
.add .time{
    font-size: 18px;
}
.add .misoratime{
    width: 60%;
    margin: 0 auto;
}
#access .form{
	display: flex;
	justify-content: space-around;
	/* padding: 50px; */
	align-items: end;
}
#access .form p{
	font-size: 30px;
}
#access .form a {
    font-weight: 700;
    display: inline-block;
    background-color: #F7F6EE;
    padding: 12px 50px 15px;
    border-radius: 100px;
    margin-top: 20px;
}
#recruit h2{
    margin: 142px auto 70px;
    text-align: center;
    font-size: 60px;
    color: rgb(72, 76, 76);
}
#recruit{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;    
}
#recruit .misorarec{
    display: flex;
    align-items: flex-end;
}
#recruit .rectext{
    width: 65%;
}
#recruit h3{
    font-size: 40px;
    margin-bottom: 50px;
}
#recruit li{
    font-size: 25px;
    list-style-image: url(../images/checkicon.png);
}
#recruit .recimg{
    width: 35%;
}
#recruit .youkou{
    width: 95%;
    margin: 20px auto 100px;
}
.topicon{
    position: fixed;
    right: 50px;
    bottom: 10px;
}
.topicon p{
    text-align: center;
    font-size: 15px;
}
.topicon img{
    width: 70px;
}
@media screen and (max-width: 720px) {
    .topicon{
       display: none;
    }
}
footer .footer{
    width: 200px;
    margin: 0 auto 20px;
}
footer p{
    text-align: center;
}
/*ここから理念ページ*/
#rinen{
    width: 100%;
    max-width: 960px;
    margin: 50px auto;
    background-color: rgb(240, 248, 255);
    padding: 50px 0;
}
#rinen div{
    margin: 50px 50px;
    padding: 50px;
    background-color: #f5f5f5;
    border-style: solid;
}
#rinen .hot{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 50px;
}
.hot img{
    width: 200px;
}
.hot h4{
    font-size: 40px;
    color: #f01919;
}
#rinen h2{
    font-size: 30px;
    text-decoration-line: underline overline;
    text-decoration-thickness: 6px;
    text-decoration-color: skyblue;
}
#rinen h3{
    font-size: 23px;
    margin-top: 25px;
    margin-bottom: 15px;
}
#rinen h4{
    text-align: right;
}
#rinen ul li{
    list-style: square;
}
#rinen .enkaku dt{
    width: 50%;
    font-size: 18px;
}
#rinen dl dd{
    margin-left: 50px;
    font-size: 20px;
}
#rinen .gaiyou dt{
    width: 15%;
    font-size: 18px;
}
@media screen and (max-width: 720px) {
    body{
        background-image: url(../images/bg2.jpg);
        background-attachment: fixed;
        background-size: cover;
    } 
    header{
        background-image: url(../images/top-res2.jpg);
        width: 100vw;
    }
	h1{
		width: 60%;
		margin: 0 auto;
		padding-top: 20px;
	}
    h1 img{
        width: 200px;
        }
    .innertext{
        font-family: "Noto Sans JP", sans-serif;
        font-size: 10px;
        color: rgb(0, 0, 0);
        text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
        padding-left: 10px;
        align-items: flex-end;
    }
    h2 span{
        font-size: 30px;
        color: #dc143c;
    }
    .enm-concept{
        width: 100%;
        padding-top: 50px;
        margin: 0 auto;
    }
    .enm{
        font-size: 25px;
        margin-bottom: 16px;
        text-align: center;
    }
    .enm-concept .text1{
        width: 80%;
        margin: 0 auto;
        font-size: 18px;
        text-align: center;
        margin-bottom: 34px;
    }
    .enm-concept .text2{
        width: 90%;
        margin: 0 auto;
        font-size: 15px;
        text-align: center;
        margin-bottom: 100px;
    }
    .works{
        display: block;
    }
    .works1{
        width: 80%;
        margin: 0 auto;
        background-color: #CCE7EB;
        border-radius: 20px;
        box-shadow: 10px 10px 10px 0px;
        padding: 10px;        
    }
    .works2{
        width: 80%;
        margin: 20px auto;
        background-color:#EDD6E7;
        border-radius: 20px;
        box-shadow: 10px 10px 10px 0px;
        padding: 10px;
        
    }
    .works p{
        font-size: 16px;
        text-align: center;
        line-height: 2.5;
        margin-bottom: 40px;
    }
    #about .rinen{
    display: block;
    margin-bottom: 100px;
    }
    .rinen .woman{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    .rinen .rinentext{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    #about .rinen .search_box{
        text-align: center;
    }
    .concept2{
        display: block;
        margin-bottom: 70px;
        text-align: center;
    }
    .concept3{
        display: block;
        margin-bottom: 70px;
        text-align: center;
    }
    #about .box1{
        width: 90%;
        margin: 0 auto;
    }
    #about .box2{
        width: 50%;
        margin: 0 auto;
    }
    #access .misora-add{
        display: block;
    }
    #access .map{
        width: 90%;
        margin: 0 auto;
    }
    #access .add{
        width: 80%;
        margin: 20px auto;
        background-color:#f5d6d6;
        border-radius: 20px;
        padding-bottom: 30px;
    }
    .add dl{
        display: flex;
        justify-content: space-between;
        font-size: 25px;
    }
    .add .misoratime{
        width: 80%;
        margin: 0 auto;
    }
	#access .form{
		display: block;
		text-align: center;
	}
	#access .form p {
    font-size: 20px;
	}

    #recruit h3{
        font-size: 40px;
        margin-bottom: 50px;
        text-align: center;
    }
    #recruit .misorarec{
        display: block;
        align-items: center;
    }
    #recruit .rectext{
        width: 90%;
        margin: 0 auto;
    }
    #recruit h3{
        font-size: 25px;
        margin-bottom: 50px;
    }
    #recruit .recimg{
        width: 200px;
        margin: 0 10px 0 auto;
    }
    #recruit li{
        font-size: 20px;
        list-style-image: url(../images/checkicon.png);
        margin-left: 50px;
    }
    #rinen{
       width: 100%;
       background-color: transparent;
       margin: 0 auto;
    }
    .hot h4{
        font-size: 25px;
        color: #f01919;
    }
    #rinen .gaiyou dt {
        width: 100%;
        font-size: 18px;
    }
    #rinen .enkaku dt{
        width: 100%;
        font-size: 18px;
    }
    #rinen dl dd{
        margin-left: 20px;
        font-size: 18px;
    }
    #rinen div{
        margin: 15px 15px;
        padding: 20px;
        background-color: #f5f5f5;
        border-style: solid;
    }
    #rinen ul li{
        list-style: square;
        margin-left: 10px;
    }
    .hot h4{
        font-size: 20px;
        color: #f01919;
    }
    .hot img{
        width: 150px;
    }
    #rinen .hot{
        padding-top: 0;
    }
}
div.hamburger-menu {
	display: none;
}
@media screen and (max-width: 720px) {
	div.hamburger-menu {
		display: block;
	}
	div.menu{
		display: none;
	}
}
div.hamburger-menu .menu-btn {			/* ボタン領域を右上に作成 */
    position: fixed;
    top: 10px;							/* ボタンの縦位置 */
    right: 10px;						/* ボタンの横位置 */
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(0,0,0,0.3);
	cursor: pointer;
	border-radius: 10px;
}
div.hamburger-menu .menu-btn span,		/* ボタンの3本線 */
div.hamburger-menu .menu-btn span:before,
div.hamburger-menu .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 35px;
    border-radius: 3px;
    background-color: #fff;				/* 3本線の色 */
    position: absolute;
}
div.hamburger-menu .menu-btn span:before {
    bottom: 10px;						/* 上の線は上方向に10px移動 */
}
div.hamburger-menu .menu-btn span:after {
    top: 10px;							/* 下の線は下方向に10px移動 */
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span {
										/* ボタンクリック時：真ん中の線は非表示 */
    background-color: rgba(255, 255, 255, 0);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::before {
										/* ボタンクリック時：上の線を斜め（／） */
    bottom: 0;
    transform: rotate(45deg);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::after {
										/* ボタンクリック時：下の線を斜め（＼） */
    top: 0;
    transform: rotate(-45deg);
}
div.hamburger-menu #menu-btn-check {	/* チェックボックスは非表示 */
    display: none;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-content {
										/* ボタンクリック時：メニュー領域を表示 */
    left: calc(100% - 220px);			/* メニュー領域の引き出し位置（0にすると左端まで） */
}
div.hamburger-menu .menu-content {		/* メニューのコンテンツ領域 */
	width: 100%;
	height: 100vh;						/* autoにするとコンテンツ領域分までに */
    position: fixed;
    top: 0;
    left: 100%;
	overflow: auto;
    z-index: 80;
    padding: 0 10px;					/* メニュー領域の左右の隙間 */
    background-color: rgba(0,0,0,0.7);	/* メニュー領域の背景色 */
    transition: all 0.5s;				/* メニュー領域の引き出しスピード */
}
div.hamburger-menu .menu-content ul {	/* メニューの領域を作成 */
	display: block;
	width: 200px;						/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
    padding-top: 80px;					/* ボタン領域分を下に下げる */
}
div.hamburger-menu .menu-content ul li {
										/* メニューの項目領域 */
    border-top: solid 1px #fff;			/* メニュー項目間の線色 */
    list-style: none;
}
div.hamburger-menu .menu-content ul li:last-child {
    border-bottom: none 1px #fff; 		/* 最後のメニュー項目の下線色 */
}
div.hamburger-menu .menu-content ul li a {
										/* メニューの項目領域（リンク実体） */
	display: block;
    font-size: 16px;
    text-decoration: none;
    color: #fff;						/* メニュー項目の文字色 */
	font-weight: bold;
    padding: 10px 0px;
    text-align: center;					/* メニュー項目の表示位置 */
}
div.hamburger-menu .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
}
div.hamburger-menu .menu-content ul li a:hover {
	opacity: 0.6;
}