@charset "UTF-8";
@media screen and (min-width: 1080px){
  #main-nav ul a {color:#100F10;}}

/* --------------------
   HERO
-------------------- */
#hero { padding: 180px 0 120px;}
#hero .photo {
  margin-top: 50px;
  border-radius: 0 20px 20px 0;
  background: url("../images/service/title.jpg") no-repeat center center;
  background-size: cover;
  height: 440px;
  width: calc(100vw - 40px);}
@media screen and (max-width: 1080px){
  #hero .text { padding: 0 4vw;}}
@media screen and (max-width: 768px){
  #hero { padding: 120px 0 15vw;}
  #hero .photo { margin-top: 5vw; height: 40vw;}}
@media screen and (max-width: 480px){
  #hero .photo {width: 95vw; border-radius: 0 10px 10px 0;}}

/* --------------------
   SERVICE
-------------------- */
#service .flex {
  padding-bottom: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap:20px 40px;}
#service .flex .title { width: 500px;}
#service .flex .text { flex: 1;}
#service .flex h2 { padding: 30px 0 0;}
#service .box { position: relative;}
#service .tscroll {
  overflow-x: scroll;
  display: block;}
#service table::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #0099F5 0%, #00F50C 100%);}
#service table {
  position: relative;
  left: -4px;
  min-width: 100%;
  border-spacing: 4px;
  white-space: nowrap;}
#service table th {
  padding:  14px 20px;
  background: #fff;
  text-align: left;}
#service table th span { text-decoration: underline;}
#service table th a {
  font-size: 22px;
  text-decoration: underline;
  color: #100F10;}
#service table th a::before {
  position: relative;
  content: "";
  top: -2px;
  display: inline-block;
  margin-right: 8px;
  width: 12px;
  height: 12px;
  background: #00CC18;
  border-radius: 6px;}
#service table td {
  padding:  14px 10px;
  background: #fff;
  text-align: center;
  line-height: 1.2;}
#service table td.txs-14 {
  letter-spacing: normal;
  min-width: 80px;}
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;}
.modal__bg{
  background: rgba(215,217,215,0.9);
  height: 100vh;
  position: absolute;
  width: 100%;}
.modal__content{
  background: #fff;
  left: 50%;
  padding: 40px 4vw 20px;
  position: absolute;
  border-radius: 20px;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 60%;}
.modal__content p a { text-decoration: underline;}
.modal__content a.js-modal-close {
  text-align: center;
  margin-top: 2em;}
@media screen and (max-width: 1080px){
  #service .flex { flex-wrap: wrap;padding-bottom: 10vw;}
  #service .flex .title,#service .flex .text { width: 100%;}
  #service .flex h2 { padding-top: 20px;}}
@media screen and (max-width: 768px){
  #service { padding-bottom: 10vw;}
  .modal__content { max-width: 90vw;width: 96vw;padding: 20px 8vw;}
  .modal__content a.js-modal-close { margin-top: 1em;}
  #service p.txs-12 { padding-bottom: 10px;}}
@media screen and (max-width: 480px){
  #service .flex h2 { padding-top: 10px;}
  #service table th { padding: 10px 10px 10px 14px;}
  #service table th, #service table th a { font-size: 16px;}
  #service table th a::before { top: 1px;}}

/* --------------------
   SHOP
-------------------- */
#shop {
  margin-top: 160px;
  margin-bottom: 160px;
  position: relative;}
#shop .content {
  padding-top: 100px;
  padding-bottom: 160px;
  position: relative;
  z-index: 2;}
#shop h2 { padding: 30px 0 80px;}
#shop .pagenv .flex {
  max-width: 800px;
  flex-wrap: wrap;
  gap:20px;
  display: flex;}
#shop .pagenv .item {
  min-width: 160px;
  border-bottom: 1px solid #00CC18;}
#shop .pagenv a {
  padding-left: 10px;
  position: relative;
  padding-bottom: 8px;
  font-size: 14px;
  color: #100F10;}
#shop .pagenv .flex .item:last-child a { padding-right: 20px;}
#shop .pagenv a img {
  position: absolute;
  bottom: 16px;
  right: 10px;}
#shop .box { padding-top: 80px;}
#shop .box .flex {
  gap: 40px 80px;
  display: flex;}
#shop .box h3 { padding-bottom: 20px;}
#shop .box p { letter-spacing: normal;}
#shop .box table {
  width: 100%;
  font-size: 15px;
	border-top: 1px solid #E0DFDF;
  margin-top: 30px;
  border-spacing:0;}
#shop table th, #shop table td {
	padding: 8px 10px 8px 0;
	text-align: left;
	vertical-align: text-top;
	border-bottom: 1px solid #E0DFDF;}
#shop table th { color: #00CC18;}
#shop .box table a {
  display: inline-block;
  text-decoration: underline;}
#shop .box .label {
  flex-wrap: wrap;
  margin-top: 20px;
  gap:4px;
  display: flex;}
#shop .box .label p {
  border-radius: 15px;
  display: inline-block;
  line-height: 1;
  font-size: 13px;
  border: 1px solid #00CC18;
  padding: 5px 12px 6px;}
#shop .box .photo {
  margin-top: 10px;
  position: relative;
  width: 500px;}
#shop .box .text { flex: 1;}
.slick-slider .slick-track, .slick-slider .slick-list { height: 320px;}
#shop .box .photo img { border-radius: 6px;}
#shop .dots-wrap {
  position: relative;
  top: -18px;
  display: flex;
  justify-content: center;}
#shop .dots-wrap li {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;}
#shop .dots-wrap li:hover, 
#shop .dots-wrap li.slick-active { background: #00CC18;}
#shop .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;}
#shop::before {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	content: "";
	background: #fff;
	border-radius: 60px 0 0 60px;
	width: 80vw;
	height: 100%;}
@media screen and (max-width: 1080px){
  #shop .box .flex { flex-wrap: wrap;}}
@media screen and (max-width: 768px){
  #shop {
    margin-top: 10vw;
    margin-bottom: 20vw;}
  #shop .content {
    padding-top: 20vw;
    padding-bottom: 20vw;
    position: relative;
    z-index: 2;}
  #shop h2 { padding: 20px 0 30px;}
  #shop .pagenv .flex { gap:10px 4px;}
  #shop .box { padding-top: 60px;}
  #shop::before { width: 100vw;}}
@media screen and (max-width: 480px){
  #shop h2 { padding: 10px 0 30px;}
  #shop .pagenv .item { min-width: 130px;}
  #shop .pagenv a { padding-left: 2px;}
  #shop .box { padding-top: 40px;}
  #shop .box .photo { width: 100%;}
  #shop .box .flex { gap:20px;}
  #shop .box h3 { padding-bottom: 0;}
  #shop .box table { margin-top: 20px;}
  .slick-slider .slick-track, .slick-slider .slick-list { height: auto;}}