/*============ 共通項目 ==============*/

@media only screen and (min-width:1000px){*.sp{display:none !important;}}
@media only screen and (max-width:1000px){*.pc{display:none !important;}}


/*============ ヘッダー 調整用　==============*/

header:not(.hTop) {
	width: 100%;
	padding: 0.5rem 2rem 0;
	display: flex;
	justify-content: space-between;
	z-index: 5;
}
header:not(.hTop) div.hWrap {
	width: min(90vw , 150rem);
	margin: auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	padding: 1rem 0;
}
header:not(.hTop) div.hWrap h1 {
	width: 8rem;
}
header:not(.hTop) div.hWrap h1 a{}
header:not(.hTop) div.hWrap h1 a img{}
header:not(.hTop) div.hWrap nav {
	width: 100rem;
	margin: 0 4rem 0 auto;
	padding: 1rem 0;
}
header:not(.hTop) div.hWrap nav.nav02 {
	width: 100%;
	transition: .8s ease-out;
	transform: translate(0 , -10vh);
	top: 0;
	bottom: initial;
	position: fixed;
	z-index: 10;
	background: rgba(255,255,255,.7);
	box-shadow: 0 .5rem .5rem #666;
	left: 0;
}
header:not(.hTop) div.hWrap nav.nav02.fixedHeader {
	transform: translate(0 , 0);
}
header:not(.hTop) div.hWrap nav ul {
	gap: 1rem;
}
header:not(.hTop) div.hWrap nav.nav02 ul {
	width: min(100% , 130rem);
	margin: auto;
	gap: 1rem;
}
header:not(.hTop) div.hWrap nav ul li {
	width: calc(calc(100% - calc(1rem * 4))/5);
}
header:not(.hTop) div.hWrap nav.nav02 ul li {
	width: calc(calc(100% - calc(1rem * 5))/6);
}
header:not(.hTop) div.hWrap nav ul{}
header:not(.hTop) div.hWrap nav ul li{}
header:not(.hTop) div.hWrap nav ul li a {
	background: rgba(16 , 75 , 159 , .8);
	width: 100%;
	height: 4.5rem;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 4rem;
	border-radius: .5rem;
	transition: .4s ease-in-out;
	position: relative;
	overflow: hidden;
	display: block;
}
header:not(.hTop) div.hWrap nav.nav02 ul li a {
	height: 4.5rem;
	line-height: 4rem;
}
header:not(.hTop) div.hWrap nav ul li a span {
	color: #fff;
	position: relative;
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 1;
}
header:not(.hTop) div.hWrap nav.nav02 ul li a span {font-size:1.8rem;}
header:not(.hTop) div.hWrap nav ul li a::before {
	content: '';
	display: block;
	height: 100%;
	width: 0;
	background: rgba(255,255,255,.1);
	margin: 0 auto;
	transition: 0.8s;
	position: absolute;
	top: 0;
	right: -30%;
	transform: skewX(60deg);
}
header:not(.hTop) div.hWrap nav ul li a:hover:before{width:160%; left:-30%; right:auto;}
header:not(.hTop) div.hWrap > a.contactBtn {
	width: 14rem;
}
header:not(.hTop) div.hWrap > a.contactBtn img {
	transition: .2s ease-in;
	transform: rotate(0) translate(0 , 0);
}
header:not(.hTop) div.hWrap > a.contactBtn:hover img{
	transform: rotate(-5deg) translate(0 , -1rem);
	}

/*============ トップページ　ヘッダー 調整用　==============*/
header.hTop {
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
	z-index: 10;
	height: 100vh;
	background: no-repeat center / cover;
	position: relative;
}

header.hTop h1:not(.sp) {
	width: 100rem;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0;
	height: 42rem;
	opacity: 0;
	transform: scale(.8,.8) rotate(-3deg);
	transition: 1.8s ease-in-out;
}
header.hTop h1:not(.sp).active {
	opacity: 1;
	transform: scale(1,1) rotate(0deg);
}
header.hTop h1:not(.sp) a {
	display: block;
	width: 100%;
	height: 100%;
}
header.hTop h1:not(.sp) a img{}

header.hTop nav {
	width: 100%;
	position: absolute;
	bottom: 3rem;
	left: 0;
	padding: 1rem 0;
	background: rgba(255,255,255,.3);
	box-shadow: 0 .5rem .5rem #666;
}
header.hTop nav.nav02 {
	transition: .8s ease-out;
	transform: translate(0 , -20vh);
	top: 0;
	bottom: initial;
	position: fixed;
	z-index: 10;
	background: rgba(255,255,255,.7);
}
header.hTop nav.nav02.fixedHeader {
	transform: translate(0 , 0);
}
header.hTop nav ul {
	width: min(100% , 130rem);
	margin: auto;
	gap: 1rem;
}
header.hTop nav ul li {
	width: calc(calc(100% - calc(1rem * 4))/5);
}
header.hTop nav.nav02 ul li {
	width: calc(calc(100% - calc(1rem * 5))/6);
}
	
header.hTop nav ul li a {
	background: rgba(16 , 75 , 159 , .8);
	width: 100%;
	height: 6rem;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 6rem;
	border-radius: .5rem;
	transition: .4s ease-in-out;
	position: relative;
	overflow: hidden;
	display: block;
}
header.hTop nav.nav02 ul li a {
	height: 4.5rem;
	line-height: 4rem;
}
header.hTop nav ul li a span {
	color: #fff;
	position: relative;
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 1;
}
header.hTop nav.nav02 ul li a span {font-size:2rem;}
header.hTop nav ul li a::before {
	content: '';
	display: block;
	height: 100%;
	width: 0;
	background: rgba(255,255,255,.1);
	margin: 0 auto;
	transition: 0.8s;
	position: absolute;
	top: 0;
	right: -30%;
	transform: skewX(60deg);
}

header.hTop nav ul li a:hover:before{width:160%; left:-30%; right:auto;}

header.hTop > a.contactBtn {
	position: absolute;
	right: 3rem;
	width: 20rem;
	top: 3rem;
}
header.hTop > a.contactBtn img {
	transition: .2s ease-in;
	transform: rotate(0) translate(0 , 0);
}
header.hTop > a.contactBtn:hover img{
	transform: rotate(-5deg) translate(0 , -1rem);
	}



/*============ フッター 調整用　==============*/

footer {
	width: 100%;
	background: url(https://safety-support-kagawa.com/site/wp-content/themes/safety-support/assets/images/common/f-bg_01.jpg) no-repeat left bottom / 100% auto;
}
footer > iframe {
	width: 100%;
	height: 70rem;
}
footer section.instaWrap {
	background: #fff;
	width: 100%;
}
footer section.instaWrap a,
footer section.instaWrap a span {
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
}
footer section.fWrap {
	width: min(100% , 130rem);
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
}
footer section.fWrap dl {
	width: calc(60% - 2.5rem);
	padding: 10rem 0;
	gap: 4rem;
	align-items: center;
}
footer section.fWrap dl dt {
	width: 10rem;
}
footer section.fWrap dl dt h1{}
footer section.fWrap dl dt h1 img{}
footer section.fWrap dl dd {
	width: calc(100% - calc(10rem + 4rem));
}
footer section.fWrap dl dd h1 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 3rem;
}
footer section.fWrap dl dd address {
	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
}
footer section.fWrap dl dd address > br{display:none;}
footer section.fWrap dl dd address a {
	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
	margin-right: 2rem;
}
footer section.fWrap dl dd address a:last-of-type {
	width: 100%;
	display: block;
}
footer section.fWrap nav {
	width: calc(40% - 2.5rem);
}
footer section.fWrap nav ul {
	gap: 2rem;
}
footer section.fWrap nav ul li {
	width: calc(calc(100% - 2rem) / 2);
}
footer section.fWrap nav ul li a {
	background: rgba(16 , 75 , 159 , .8);
	width: 100%;
	height: 5rem;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 5rem;
	border-radius: .5rem;
	transition: .4s ease-in-out;
	position: relative;
	overflow: hidden;
	display: block;
}
footer section.fWrap nav ul li a span {
	color: #fff;
	position: relative;
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
	font-size: 2rem;
	line-height: 1;
}
footer section.fWrap nav ul li a:before {
	content: '';
	display: block;
	height: 100%;
	width: 0;
	background: rgba(255,255,255,.1);
	margin: 0 auto;
	transition: 0.8s;
	position: absolute;
	top: 0;
	right: -30%;
	transform: skewX(60deg);
}
footer section.fWrap nav ul li a:hover:before{width:160%; left:-30%; right:auto;}
footer small{
	display: block;
	text-align: center;
	margin-bottom: 3rem;
	}
footer small,
footer small a {
	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
}

p.toLink {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	width: 13rem;
	border-radius: 1rem;
	overflow: hidden;
	padding: 1rem;
}

p.toLink a{}
p.toLink a img {
	position: relative;
	z-index: 2;
}
p.toLink a::after {
	content: "";
	opacity: 0;
	background: rgba(255,255,255,.8);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s ease-in;
}
p.toLink a:hover:after{opacity:1;}

/*============ スマホページ 調整用　==============*/

@media only screen and (max-width:1000px){

div.bbc {
	background: rgba(00,00,00,.5);
	width: 100vw;
	height: 120vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	transform: translate(0,-200vh);
	transition: .4s ease-out;
}
.open div.bbc{transform: translate(0,0);}

/*============ ヘッダー 調整用　==============*/

header:not(.hTop) div.hWrap {
	padding: 2vw 0;
}
header:not(.hTop) div.hWrap h1 {
	width: 10vw;
	transition: .4s ease-in;
	transform: translate(0 , 0);
}
.open header:not(.hTop) div.hWrap h1 {transform: translate(0 , -50vw);}
header:not(.hTop) div.hWrap h1.sp {
	position: fixed;
	top: 2rem;
	left: 2rem;
	width: 15rem;
	z-index: 12;
	transform: translate(0 , -50vw);
	transition: .7s ease-out;
}
.open header:not(.hTop) div.hWrap h1.sp{transform: translate(0 , 0);}
header:not(.hTop) div.hWrap nav.nav02 {
	transition: .8s ease-out;
	transform: translate(150vw , 0);
	top: 26rem;
	bottom: initial;
	position: fixed;
	z-index: 12;
	width: 100%;
	background: none;
	box-shadow: none;
}
.open header:not(.hTop) div.hWrap nav.nav02,
.open header:not(.hTop) div.hWrap nav.nav02.fixedHeader {transform: translate(0 , 0);}
header:not(.hTop) div.hWrap nav.nav02.fixedHeader {transform: translate(150vw , 0);}
header:not(.hTop) div.hWrap nav ul {gap: 3rem;}
header:not(.hTop) div.hWrap nav.nav02 ul li {
	width: 90%;
}
header:not(.hTop) div.hWrap nav.nav02 ul li a {
	height: 13vw;
	line-height: 13vw;
	text-align: left;
	padding: 0 9vw;
}
header:not(.hTop) div.hWrap nav.nav02 ul li a::after {
	content: ">";
	transition-duration: .8s;
	position: absolute;
	z-index: 12;
	display: block;
	opacity: 1;
	transform: translate(0, 0) scale(1,1.5);
	top: 0;
	bottom: 0;
	right: 3rem;
	font-size: 5rem;
	font-weight: 100;
	color: #fff;
}
header:not(.hTop) div.hWrap nav.nav02 ul li a span {
	font-size: 4.5rem;
}
header:not(.hTop) div.hWrap > a.contactBtn {
	position: fixed;
	right: 6rem;
	width: 45rem;
	top: 135rem;
	background: rgba(255,255,255,.8);
	padding: 2rem;
	z-index: 11;
	transform: translate(-150vw , 0);
	transition: 1s ease-in;
}
.open header:not(.hTop) div.hWrap > a.contactBtn {transform: translate(0 , 0);}
header:not(.hTop) div.hWrap div.menu {
	width: 15rem;
	height: 15rem;
	position: fixed;
	right: 3rem;
	top: 3rem;
	z-index: 11;
	margin: auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
header:not(.hTop) div.hWrap div.menu #menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 21rem;
	height: 100%;
	cursor: pointer;
	top: 0;
	left: 0;
	margin: auto;
	background: rgba(16 , 75 , 159 , .8);
	padding: 0;
	box-sizing: border-box;
}

header:not(.hTop) div.hWrap div.menu #menuButton span,
header:not(.hTop) div.hWrap div.menu #menuButton:before,
header:not(.hTop) div.hWrap div.menu #menuButton:after{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 85%;
	height: 2px;
	margin: auto;
	-webkit-transition: .1s ease-in-out;
	transition: all 1s;
	border-radius: 40px;
	background: #ED6E9F;
	background: #fff;
	left: 0;
	right: 0;
}

header:not(.hTop) div.hWrap div.menu #menuButton span{
	overflow: hidden;
	z-index: 1;
	color: #fff;
}

header:not(.hTop) div.hWrap div.menu #menuButton::before {
	z-index: 2;
	transform: rotate(0deg);
	top: 8rem;
	content: "";
}
header:not(.hTop) div.hWrap div.menu #menuButton::after {
	z-index: 2;
	transform: rotate(0deg);
	top: -8rem;
	content: "";
}

header:not(.hTop) div.hWrap div.menu #menuButton span{
	transform:rotate(0deg) translateX(0px);
}

header:not(.hTop) div.hWrap div.menu #menuButton:before,
header:not(.hTop) div.hWrap div.menu #menuButton:after{
	transition: transform 500ms;
}

header:not(.hTop) div.hWrap div.menu.menuActive #menuButton span {
	transform: translateX(-200px);
	top: 0;
}

header:not(.hTop) div.hWrap div.menu.menuActive #menuButton::before {
	transform: rotate(-225deg);
	top: 0;
}

header:not(.hTop) div.hWrap div.menu.menuActive #menuButton::after {
	transform: rotate(45deg);
	top: 0;
}


/*============ トップページ　ヘッダー 調整用　==============*/

header.hTop {
	height: 70vh;
	z-index: initial;
}
header.hTop h1.sp {
	position: fixed;
	top: 2rem;
	left: 2rem;
	width: 15rem;
	z-index: 12;
	transform: translate(0 , -50vw);
	transition: .7s ease-out;
}
.open header.hTop h1.sp{transform: translate(0 , 0);}
header.hTop nav.nav02 {
	transition: .8s ease-out;
	transform: translate(150vw , 0);
	top: 26rem;
	bottom: initial;
	position: fixed;
	z-index: 12;
	width: 100%;
	background: none;
	box-shadow: none;
}
.open header.hTop nav.nav02,
.open header.hTop nav.nav02.fixedHeader {transform: translate(0 , 0);}
header.hTop nav.nav02.fixedHeader {transform: translate(150vw , 0);}
header.hTop nav ul {gap: 3rem;}
header.hTop nav.nav02 ul li {
	width: 90%;
}
header.hTop nav.nav02 ul li a {
	height: 13vw;
	line-height: 13vw;
	text-align: left;
	padding: 0 9vw;
}
header.hTop nav.nav02 ul li a::after {
	content: ">";
	transition-duration: .8s;
	position: absolute;
	z-index: 12;
	display: block;
	opacity: 1;
	transform: translate(0, 0) scale(1,1.5);
	top: 0;
	bottom: 0;
	right: 3rem;
	font-size: 5rem;
	font-weight: 100;
	color: #fff;
}
header.hTop nav.nav02 ul li a span {
	font-size: 4.5rem;
}
header.hTop > a.contactBtn {
	position: fixed;
	right: 6rem;
	width: 45rem;
	top: 135rem;
	background: rgba(255,255,255,.8);
	padding: 2rem;
	z-index: 11;
	transform: translate(-150vw , 0);
	transition: 1s ease-in;
}
.open header.hTop > a.contactBtn {transform: translate(0 , 0);}
header.hTop div.menu {
	width: 15rem;
	height: 15rem;
	position: fixed;
	right: 3rem;
	top: 3rem;
	z-index: 11;
	margin: auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
header.hTop div.menu #menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 21rem;
	height: 100%;
	cursor: pointer;
	top: 0;
	left: 0;
	margin: auto;
	background: rgba(16 , 75 , 159 , .8);
	padding: 0;
	box-sizing: border-box;
}

header.hTop div.menu #menuButton span,
header.hTop div.menu #menuButton:before,
header.hTop div.menu #menuButton:after{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 75%;
	height: 2px;
	margin: auto;
	-webkit-transition: .1s ease-in-out;
	transition: all 1s;
	border-radius: 40px;
	background: #ED6E9F;
	background: #fff;
	left: 0;
	right: 0;
}

header.hTop div.menu #menuButton span{
	overflow: hidden;
	z-index: 1;
	color: #fff;
}

header.hTop div.menu #menuButton::before {
	z-index: 2;
	transform: rotate(0deg);
	top: 8rem;
	content: "";
}
header.hTop div.menu #menuButton::after {
	z-index: 2;
	transform: rotate(0deg);
	top: -8rem;
	content: "";
}

header.hTop div.menu #menuButton span{
	transform:rotate(0deg) translateX(0px);
}

header.hTop div.menu #menuButton:before,
header.hTop div.menu #menuButton:after{
	transition: transform 500ms;
}

header.hTop div.menu.menuActive #menuButton span {
	transform: translateX(-200px);
	top: 0;
}

header.hTop div.menu.menuActive #menuButton::before {
	transform: rotate(-225deg);
	top: 0;
}

header.hTop div.menu.menuActive #menuButton::after {
	transform: rotate(45deg);
	top: 0;
}





/*============ フッター 調整用　==============*/
footer {
	width: 100%;
	background: url(https://safety-support-kagawa.com/site/wp-content/themes/safety-support/assets/images/common/f-bg_01.jpg) no-repeat left bottom / auto 100%;
	padding-bottom: 25vw;
}

footer > iframe {
	width: 100%;
	height: 130vw;
	max-height: initial !important;
}
footer section.fWrap {
	width: min(100% , 130rem);
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
	padding: 0 5vw;
	flex-wrap: wrap;
}
footer section.fWrap dl {
	width: 100%;
	padding: 10rem 0 2vw;
	gap: 4rem;
	align-items: center;
}
footer section.fWrap dl dt {
	width: 15vw;
}
footer section.fWrap dl dd {
	width: 100%;
}
footer section.fWrap dl dd h1 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 4vw;
	text-align: center;
}
footer section.fWrap dl dd address,
footer section.fWrap dl dd address a{
	font-family: "Noto Serif JP", serif;
	font-size: 3vw;
	text-align: center;
}
footer section.fWrap nav {
	width: 100%;
}
footer section.fWrap nav ul {
	gap: 2vw;
	margin-bottom: 3vw;
}
footer section.fWrap nav ul li {
	width: calc(calc(100% - 3vw) / 2);
}
footer section.fWrap nav ul li a {
	background: rgba(16 , 75 , 159 , .8);
	width: 100%;
	height: 10vw;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 10vw;
	border-radius: .5rem;
	transition: .4s ease-in-out;
	position: relative;
	overflow: hidden;
	display: block;
}
footer section.fWrap nav ul li a span {
	font-size: 3vw;
}
footer small, footer small a {
	font-family: "Noto Serif JP", serif;
	font-size: 3vw;
}
p.toLink {
	width: 26rem;
	padding: 1rem;
	background: rgba(255,255,255,.8);
}


}