@charset "UTF-8";
/* shopinfo PAGE */
.submenu { display: table; table-layout: fixed; width: 980px!important; margin: -9px auto 0; padding: 0;}
.submenu li { display:table-cell; text-align: center; border-left: 1px dotted #fff;}
.submenu li a { display: block; padding: 8px 16px; background: #7f765d; color:#fff; list-style-type: none; margin: 0px; text-decoration: none; }
.submenu li a:hover { background:#b6ac92;}

@media screen and ( max-width:480px ) {
	.submenu { width:100%!important; margin:0 auto; }
	.submenu li { width: 49%; display:inherit; float: left; font-size:14px; margin-bottom: 1px; }
	.submenu li a { padding: 4px auto; }
	.submenu li i { font-size:12px;}

}

.modal_wrap input{
              display: none;
          }
.modal_overlay{
              display: flex;
              justify-content: center;
              overflow: auto;
              position: fixed;
              top: 0;
              left: 0;
              z-index: 9999;
              width: 100%;
              height: 100%;
              background: rgba(0,0,0,0.9);
              opacity: 0;
              transition: opacity 0.5s, transform 0s 0.5s;
              transform: scale(0);
          }

          .modal_trigger{
              position: absolute;
              width: 100%;
              height: 100%;
          }

          .modal_content{
              position: fixed;
              align-self: center;
              overflow-y: scroll;
              width: 850px;
              max-height:685px;
              box-sizing: border-box;
              background: #fff;
              line-height: 1.4em;
              transition: 0.5s;
              background: #f4eef6;
              font-size: 14px;
			  letter-spacing: 0;
			  top:50%;
			  left:50%;
			  -webkit-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
          }
          .close_button{
              position: absolute;
              top: 14px;
              right: 16px;
              font-size: 24px;
              cursor: pointer;
          }
          .modal_wrap input:checked ~ .modal_overlay{
              opacity: 1;
              transform: scale(1);
              transition: opacity 0.5s;
          }
					.open_button{
						cursor: pointer;
          }
					.open_button:hover{
						opacity: 0.6;
          }
    .left { width: 228px; float: left; padding: 40px 20px 0px;}
	.left img {width: 95%;}
    .staffName {text-align: center; font-size: 16px; line-height: 1.6; margin-top: 0;}
    .staffName span { font-size: 12px;}
   .staffName2 {text-align: center; font-size: 15px; line-height: 1.6; margin-top: 0;}
    .staffName2 span { font-size: 12px;}
    .career {overflow: hidden; margin-bottom: 24px;}
    .career dt { background: #fff; padding: 4px 4px 0px; width: 80px; float: left; text-align: center; margin-right: 12px; margin-bottom: 4px;}
    .career dd { line-height: 2;}
    .certified h4 {background: #9fa0a0; text-align: center; width: 100%; line-height: 1.8; color:#fff; font-weight: normal; font-size:12px; padding-top: 0px; }
    .certified ul { padding-left: 20px; margin-top:-4px;}
    .certified ul li { margin-bottom: 6px;}
    .right { width: 542px; float: left; padding: 20px 20px 0px 0px;}
    .staff_greeting { border: 1px dotted #666; padding: 12px; line-height: 1.7;}
    .right h3 { border-left: 4px solid #a88fb2; font-weight: normal; font-size:18px; padding-left: 8px; line-height: 1.6; padding-top: 3px; margin-bottom: 8px; margin-top: 8px;}
    /*.flexBox, .flexBox2 {display: flex; width: 100%; align-content: space-between; margin-bottom: 12px;}*/
.flexBox, .flexBox2 {display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px; /* 隙間 */
  }
.flexBox2 { margin-bottom:24px;}
.flexBox div img {width:100%; }
.flexBox p {margin-top:-4px;  font-size: 10px; text-align: right;}
.flexBox2 div img {width:210px;}

@media screen and ( max-width:480px ) {
	.modal_content { width:90%; max-height:80%;}
	.left { width: 87%; float: none; }
	.left img {width: 70%;}
	.right { width: 87%; float: none; padding: 10px 20px 20px;}
	.right img { width: 100%; margin-bottom: 20px;}
	.flexBox2 div img {width:99%;}
	.flexBox, .flexBox2 {display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px; /* 隙間 */
  }
  .flexBox div { height:120px;}
  .flexBox p {margin-top:-22px;
  }