@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


 /* ヘッダーを固定 */
 @media (min-width: 960px) {
  .l-header {
    position: fixed!important;
    background: transparent;
  }

}

@media (max-width: 959px) {
  .l-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}


.l-header .l-container {
  max-width: 100%!important;
}
nav#gnav {
  display: none;
}

.l-header__menuBtn.sp_ {
  display: block!important;
  border-radius: 4px;
}
.-series .l-header__inner {
  align-items: center;
}
.p-spMenu {
  display: block;
}
	
.p-spMenu__inner {
	--color_menu_text: #fff;
	--color_menu_bg: rgba(25 41 84);
	width: 100vw;
}

.-right .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 0;
  transition: opacity .45s;
}
[data-spmenu=opened] .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.p-spMenu__inner::before {
  background: var(--color_menu_bg);
  opacity: 1;
}

@media screen and (max-width: 959px) {
  header, 
  .l-header, 
  .p-header {
    background: transparent !important;
  }
}


.p-spMenu__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 80px 5% !important;
  min-height: 100vh;
  overflow-y: auto;
}
@media (max-width: 599px) {
  .p-spMenu__body {
    font-size: 5vw;
  }
}
.c-widget__title.-spmenu {
  display: none;  
}
.p-spMenu__nav {
	width: 100%;
	max-width: 1200px; 
}


.p-spMenu__nav .c-spnav, .p-spMenu__nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    list-style: none;
    padding: 0;
}

/* 各メニュー項目 */
.p-spMenu__nav > ul > li {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.p-spMenu__nav > ul > li:nth-child(1){
	grid-area: 1 / 1 / 2 / 4;
	width: auto !important; 
    justify-self: start;
    display: flex;
    justify-content: center;
}
.p-spMenu__nav > ul > li:nth-child(1) > a {
    display: inline-block !important;
    width: auto !important;
    padding: 0;
}
.p-spMenu__nav > ul > li:nth-child(1) img {
    width: 100%;
    max-width: 240px;
    height: auto;
	padding-bottom:40px;
}
/* SP */
.p-spMenu__nav > ul > li:nth-child(2) { grid-area: 2 / 1 / 6 / 2; }
.p-spMenu__nav > ul > li:nth-child(3) { grid-area: 6 / 1 / 7 / 2; }
.p-spMenu__nav > ul > li:nth-child(4) { grid-area: 7 / 1 / 8 / 2; }
.p-spMenu__nav > ul > li:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
.p-spMenu__nav > ul > li:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
.p-spMenu__nav > ul > li:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }
.p-spMenu__nav > ul > li:nth-child(8) { grid-area: 5 / 2 / 6 / 3; }
.p-spMenu__nav > ul > li:nth-child(9) { grid-area: 6 / 2 / 7 / 2; }
.p-spMenu__nav > ul > li:nth-child(10) { grid-area: 7 / 2 / 8 / 3; }

/* PC */
@media (min-width: 768px) {
    .p-spMenu__nav .c-spnav, .p-spMenu__nav ul {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .p-spMenu__nav > ul > li:nth-child(1) {
        grid-area: 1 / 1 / 2 / 4;
    }
    .p-spMenu__nav > ul > li:nth-child(1) img {
        width: 100%;
        max-width: 360px; 
        height: auto;
    }
	
    .p-spMenu__nav > ul > li:nth-child(2) {
		grid-area: 2 / 1 / 6 / 2;
		align-self: start;
	}
    .p-spMenu__nav > ul > li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
    .p-spMenu__nav > ul > li:nth-child(4) { grid-area: 3 / 2 / 4 / 3; }
    .p-spMenu__nav > ul > li:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
    .p-spMenu__nav > ul > li:nth-child(6) { grid-area: 5 / 2 / 6 / 3; }
    .p-spMenu__nav > ul > li:nth-child(7) { grid-area: 2 / 3 / 3 / 4; }
    .p-spMenu__nav > ul > li:nth-child(8) { grid-area: 3 / 3 / 4 / 4; }
    .p-spMenu__nav > ul > li:nth-child(9) { grid-area: 4 / 3 / 5 / 4; }
    .p-spMenu__nav > ul > li:nth-child(10) { grid-area: 5 / 3 / 6 / 4; }
}


/* 親メニュー */
.p-spMenu__nav > ul > li > a {
	font-size: 20px;
	font-weight: 700;
	display: block;
	margin-bottom: 15px;
	padding: 0 0 10px 0;
	display: block !important;
}

.p-spMenu__nav > ul > li:nth-child(9) > a,
.p-spMenu__nav > ul > li:nth-child(10) > a {
    font-size: 16px;
}

/* 子メニュー */
.p-spMenu__nav .sub-menu {
  display: block !important;
  opacity: 1 ;
  visibility: visible ;
  position: static ;
  transform: none ;
  padding: 0 ;
}
.p-spMenu__nav .sub-menu li {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
}
.p-spMenu__nav .sub-menu li a {
  padding: 8px 0 8px 8px !important;
  display: block;
  text-align: left;
}
.p-spMenu__closeBtn {
  position: fixed !important;
  z-index: 9999;
  background-color: #FF5966;
  top: 20px;
  right: 48px !important;
  width: 48px ;
  height: 48px ;
  display: flex ;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
  .p-spMenu__closeBtn {
	  top: 20px;
	  right: 32px !important;
  }
}
@media screen and (max-width: 959px) {
  .l-header__menuBtn.sp_{
	  border-radius: 0 0 0 4px;
	}
  .p-spMenu__closeBtn {
    right: 0 !important;
	top: 0;
	border-radius: 0 0 0 4px;
  }
}


.c-gnav .sub-menu a:before, .c-listMenu a:before {
  content: none;
}
.p-spMenu__inner a {
  padding: 1em 0;
  transition: color .2s;
}
.p-spMenu__inner a:hover {
  padding-left: inherit;
  padding-right: inherit;
  background-color: inherit;
	color: #FF5966;
}



@media (max-width: 767px) {
  .p-spMenu__nav > ul > li > a {
    font-size: 16px !important;
  }
  .p-spMenu__nav > ul > li:nth-child(9) > a,
  .p-spMenu__nav > ul > li:nth-child(10) > a {
    font-size: 14px !important;
  }
  .p-spMenu__nav .sub-menu li {
    font-size: 14px !important;
  }
  .p-spMenu__nav {
    margin-bottom: 60px !important; 
  }
}

/* ------------------------------------------------------
 * 下線の設定と配置ズレの修正
 * ------------------------------------------------------ */

.c-spnav a {
	border-bottom: none;
}

.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a {
  border-bottom: 1px solid var(--color_menu_text) !important;
  padding-bottom: 8px !important;
  margin-bottom: 15px !important;
  display: block !important;
}

.p-spMenu__nav > ul > li:nth-child(1) > a,
.p-spMenu__nav > ul > li:nth-child(9) > a,
.p-spMenu__nav > ul > li:nth-child(10) > a {
  border-bottom: none !important;
}

.p-spMenu__nav > ul > li {
  justify-self: stretch;
  align-self: start !important;
}


 /* 赤丸ボタン */
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a {
    position: relative;
    display: flex;
	align-items: center;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 20px !important;
    text-decoration: none;
}
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #FF5966;
    border-radius: 50%;
	z-index: 1;
}
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a::before {
    content: "";
    position: absolute;
    right: 6px;
	left: auto;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    z-index: 2;
}

/* --- ボタンの縦位置 --- */
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a::after,
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a::before {
    top: calc(50% - 5px) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

/* --- ホバー --- */

.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a:hover::after {
    background-color: #fff;
    box-sizing: border-box;
}
.p-spMenu__nav > ul > li:nth-child(n+2):nth-child(-n+8) > a:hover::before {
    border-top-color: #FF5966 ;
    border-right-color: #FF5966;
}


.p-spMenu__nav .sub-menu li.add-icon > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding-right: 8px;
}
.p-spMenu__nav .sub-menu li.add-icon > a::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin-left: auto;
	background-image: url("https://industry.co.jp/wp2025/wp-content/uploads/2026/07/icon-link.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
	transition: background-image 0.2s ease;
}
.p-spMenu__nav .sub-menu li.add-icon > a:hover::after {
	background-image: url("https://industry.co.jp/wp2025/wp-content/uploads/2026/07/icon-link-red.png");
}



/* スマホの表示領域 */
.p-spMenu__body {
  min-height: 100dvh !important; 
  padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 767px) {
  .p-spMenu__nav {
    margin-bottom: 60px !important; 
  }
}