@charset "UTF-8";
/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2022/04/04] 複製調整

====================================== */

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Redefinition
	3. Base Box Setting
	4. Common Items Setting
		- Basic Link
	 	- Header Items
		- Global Navigation
	 	- Footer Items
		- Breadcrumbs
		- Page Top Button
	5. Form Setting

====================================== */



/*===== ■1. Global Redefinition =====*/
body {
  margin: 0px auto;
  color: #333333;
  line-height: 1.5;
}

dt,li,strong,em,span { line-height: 1.2;}

iframe { border: 1px solid #ccc;}

img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

sup {
  font-size: 1.0rem;
  vertical-align: text-top;
}



/*===== ■2. Font Redefinition =====*/
html { font-size: 62.5%;}

body {
  font-size: 1.6em;
	font-family: 'Roboto Condensed', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}

@media (max-width: 768px) {
	html { font-size: calc(100vw / 76.8 * 2.048);}
	body { font-size: 1.4em;}
}
@media (max-width: 640px) { html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px) { html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px) { html { font-size: calc(100vw / 37.5 *1);}}
@media (max-width: 360px) { html { font-size: calc(100vw / 36);}}
@media (max-width: 320px) { html { font-size: calc(100vw / 32);}}

@media (min-width: 1536px){ html { font-size: calc(100vw / 153.6);}}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?o9w2bl');
  src:  url('fonts/icomoon.eot?o9w2bl#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?o9w2bl') format('truetype'),
    url('fonts/icomoon.woff?o9w2bl') format('woff'),
    url('fonts/icomoon.svg?o9w2bl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ico_"], [class*=" ico_"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico_bell:before { content: "\e900";}
.ico_dl:before { content: "\e901";}
.ico_home:before { content: "\e902";}
.ico_list:before { content: "\e903";}
.ico_qr:before { content: "\e904";}
.ico_ques:before { content: "\e905";}
.ico_user:before { content: "\e906";}
.ico_key:before { content: "\e907";}
.ico_mail:before { content: "\e908";}



/*===== ■3. Base Box Setting =====*/
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.8),rgba(255,255,255,.9));
  box-shadow: 0 1px 4px rgba(2,61,87,.25);
}

footer {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 2rem;
  background: #ebebeb;
}

main {
  flex: 1;
  display: flex;
  margin: 2rem 2rem auto;
}

main > article {
  width: 75vw;
  min-width: 728px;
  margin: 0 auto;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  background: #fff;
}

main > article::before,
main > nav::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 29.28vw;
  height: 100vh;
  background: linear-gradient(125deg, #b4f8fc 5%, #12c8f2 45%, #0472a2 95%);
  content: "";
}
main > nav::before { width: 120px;}

main > #cont {
  display: flex;
  flex: 1;
  margin-left: 2rem;
}

main > #cont article { flex: 1;}
main > #cont aside {
  width: 36.17%;
  max-width: 640px;
  min-width: 240px;
  margin-left: 2rem;
  padding: 1rem;
  background: #ebebeb;
}

main > #cont article section,
main > #cont article .section { margin-top: 5rem;}

main > #cont article .main_cont {
  margin-top: 2rem;
  padding: 2rem;
  background: #dffcff;
}

@media (max-width: 768px) {
  body.active { overflow: hidden;}
  header {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 0;
    padding: 1rem;
  }
  footer {
    display: block;
    margin-top: 1.5rem;
    padding: 1.5rem 1rem;
  }
  main {
    display: block;
    margin: 1.5rem 1rem auto;
  }
  main::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 29.28vw;
    height: 100vh;
    background: linear-gradient(125deg, #b4f8fc 5%, #12c8f2 45%, #0472a2 95%);
    content: "";
  }
  
  main > article {
    width: 100%;
    min-width: auto;
  }
  main > article::before,
  main > nav::before { display: none;}
  
  main > #cont {
    display: block;
    margin: 0;
    padding: 1rem;
    background: rgba(255,255,255,.9);
    box-shadow: 0 5px 10px rgba(0,0,0,.25);
  }
  
  main > #cont aside {
    width: 100%;
    max-width: none;
    min-width: inherit;
    margin: 2rem 0 0;
    padding: 1rem;
  }
  
  main > #cont article section,
  main > #cont article .section { margin-top: 3rem;}
  
  main > #cont article .main_cont {
    padding: 1rem;
  }
}



/*===== ■4. Common Items Setting =====*/
/* Basic Link */
a {
  position: relative;
  color: #0472a2;
  line-height: 1.2;
}

a:hover {
  color: #3ac5e0;
  text-decoration: none;
}

a.txtlink {
  display: inline-block;
  padding-right: 3rem;
  font-weight: bold;
  text-decoration: none;
}
a.txtlink::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5rem;
  height: 1rem;
  margin: auto;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%230472a2%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');
  background-size: cover;
  content: "";
}
a.txtlink:hover::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%233ac5e0%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');}

a.txtlink.gray { color: #999;}
a.txtlink.gray::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23999%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E'); background-size: cover;}
a.txtlink.gray:hover { color: #333;}
a.txtlink.gray:hover::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23333%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');}

a.txtlink.black { color: #333;}
a.txtlink.black::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23333%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E'); background-size: cover;}
a.txtlink.black:hover { color: #3ac5e0;}
a.txtlink.black:hover::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%233ac5e0%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');}

a.txtlink.red { color: #c00;}
a.txtlink.red::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23c00%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E'); background-size: cover;}
a.txtlink.red:hover { color: #f00;}
a.txtlink.red:hover::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23f00%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');}

a.soon {
  opacity: 0.5;
  pointer-events: none;
}

a img { transition: all .15s;}
a:hover img {
  opacity: .6;
  transition: all .15s;
}


@media (max-width: 768px) {
  a,a:hover {
    color: #0472a2;
    transition: none;
  }
  a img { transition: none;}
  a:hover img {
    opacity: 1;
    transition: none;
  }
  a.txtlink:hover::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%230472a2%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E');}
  a.txtlink.gray { color: #999 !important;}
  a.txtlink.gray::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23999%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E') !important;}
  a.txtlink.black { color: #333 !important;}
  a.txtlink.black::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23333%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E') !important;}
  a.txtlink.red { color: #c00 !important;}
  a.txtlink.red::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls%7Bfill%3A%23c00%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls%22%20d%3D%22M25%2C10H3V6H16V0ZM0%2C6H2v4H0Z%22%2F%3E%3C%2Fsvg%3E') !important;}
}


/* Header Items */
header > :first-child { margin-right: 1.5rem;}
header > :first-child img {
  display: block;
  max-width: 300px;
}
header > dl {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
header > dl dt {
  margin-right: 1rem;
  padding: .5rem 1rem;
  background: #023d57;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1;
}
header > dl dd {
  font-weight: bold;
  white-space: normal;
  line-height: 1.2;
}

header > div:last-child {
  display: flex;
  align-items: center;
  margin-left: auto;
}
header > div:last-child p {
  margin: 0 2rem;
  font-weight: bold;
  line-height: 1.2;
}


@media (max-width: 768px){
  header > :first-child {
    order: 1;
    width: calc(100% - 13.34vw);
  }
  header > :first-child img {
    max-width: none;
  }
  header > dl {
    order: 2;
    width: calc(100% - 13.34vw);
    margin: 1rem 0 .5rem;
  }
  header > dl dt { margin: 0 .5rem 0 0; font-size: 1.1rem;}
  
  header > dl dd { font-size: 1.1rem;}

  header > div:last-child {
    order: 2;
    width: 100%;
    margin: 0;
  }
  header > div:last-child p { margin: 0 2rem 0 0;}
  
  header > div:last-child .boxlink { margin: 0 0 0 auto;}
  header > div:last-child .boxlink a:not(.noicon) span { padding: 1em 3rem;}
}


/* Footer Items */
footer a {
  color: #333;
  text-decoration: none;
}
footer > div { width: calc(50% - 2rem);}

footer > div dl { margin-bottom: 1.5rem;}
footer > div dt {
  font-weight: bold;
  margin-bottom: .5rem;
}
footer > div ul {
  display: flex;
  margin-top: .5rem;
}
footer > div li {
  margin-right: 2rem;
  font-size: 1.4rem;
}

footer > div + div { text-align: right;}
footer > div + div > span {
  display: block;
  width: 150px;
  margin: 0 0 .5rem auto;
}
footer > div + div > span + p { font-size: 1.4rem;}

@media (max-width: 768px){
  footer a,footer a:hover { color: #333;}
  
  footer > div { width: 100%;}

  footer > div dt {
    font-weight: bold;
    margin-bottom: .5rem;
  }
  footer > div ul {
    display: flex;
    margin-top: 1rem;
  }
  footer > div li {
    margin-right: 1.5rem;
    font-size: 1.6rem;
  }
  footer > div li:last-child { margin-right: 0;}
  footer > div > ul li { font-size: 1.2rem;}

  footer > div + div {
    margin-top: 2rem;
    text-align: left;
  }
  footer > div + div > span {
    display: block;
    width: 25%;
    margin: 0 auto 1rem;
  }
  footer > div + div > span + p { font-size: 1.2rem;}
}


/* Global Navigation */
main > nav {
  width: 200px;
  background: #fff;
}

main > nav > ul {
  position: sticky;
  top: 0;
  border: 1px solid #fff;
  color: #023d57;
}

main > nav > ul li {
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-bottom: 1px dotted #023d57;
}

main > nav a {
  display: flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 1rem 0;
  color: #023d57;
  font-size: 1.4rem;
  text-decoration: none;
  transition: all .25s;
}
main > nav a:hover,
main > nav a.active {
  background: #023d57;
  color: #fff;
  transition: all .25s;
}
main > nav a.active::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1.5rem;
  height: 100%;
  background:
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #023d57 50.01%) no-repeat top left / 100% 51%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #023d57 50.01%) no-repeat bottom right / 100% 51%;
  content: "";
  opacity: 1;
  transition: all .25s;
}

main > nav a i {
  margin: 0 1rem 0 .5rem;
  font-size: 2.5rem;
}


/* Button */
#nav_button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 13.34vw;
  height: 13.34vw;
  padding: 1.34vw 2.67vw;
  background: #023d57;
  color: #fff;
  font-weight: bold;
  font-size: 1.0rem;
}
#nav_button:focus { outline: none;}

#nav_button span {
  display: block;
  position: relative;
  width: 100%;
}
#nav_button span::before,
#nav_button span::after {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: .54vw;
  background: #fff;
  transform: translateY(-50%);
  transform-origin: center;
  content: "";
}
#nav_button span::before  { top: calc(50% - 3vw);}
#nav_button span::after  { top: calc(50% + 3vw);}

.active #nav_button span { animation: navBAR .4s ease-in-out forwards;}
.active #nav_button span::before { animation: navBAR01 .4s ease-in-out forwards;}
.active #nav_button span::after { animation: navBAR02 .4s ease-in-out forwards}

@keyframes navBAR {
	0% {
    color: currentColor;
	}
	60% {
    color: #023d57;
  }
	100% {
    color: #023d57;
  }
}
@keyframes navBAR01 {
	0% {
    top: calc(50% - 3vw);
	}
	60% {
    top: 50%;
  }
	80% {
    top: 50%;
    transform: rotate(0);
  }
	100% {
    top: 50%;
    transform: rotate(45deg);
  }
}
@keyframes navBAR02 {
	0% {
    top: calc(50% + 3vw);
	}
	60% {
    top: 50%;
  }
	80% {
    top: 50%;
    transform: rotate(0);
  }
	100% {
    top: 50%;
    transform: rotate(-45deg);
  }
}
@keyframes navCont {
	0% {
    opacity: 0;
    transform: translateX(100%);
	}
	100% {
    opacity: 1;
    transform: translateX(0);
  }
}


@media only screen and (min-width: 1366px){
  main > nav { width: 14.64vw;}
}


@media (max-width: 768px){
  main > nav {
    display: none;
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    width: 70%;
    height: 100%;
    transform: translateX(100%);
    opacity: 0;
    animation: navCont .4s ease-in-out forwards
  }

  main > nav > ul {
    position: static;
    border: 1px solid #fff;
    color: #023d57;
  }

  main > nav > ul li {
    margin-bottom: 1px;
    padding-bottom: 1px;
    border-bottom: 1px dotted #023d57;
  }

  main > nav a {
    display: flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 1rem 0;
    color: #023d57;
    font-size: 1.4rem;
    text-decoration: none;
  }
  main > nav a:hover {
    color: #023d57;
    background: none;
  }
  main > nav a.active {
    color: #fff;
    background: #023d57;
  }
  main > nav a.active::after { display: none;}
  main > nav a i {
    margin: 0 1rem 0 .5rem;
    font-size: 2.5rem;
  }
  
  .active main::after {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.5);
    content: "";
  }
  
  .active main > nav {
    display: block;
    padding: 1rem;
  }
}


/* Breadcrumbs */

@media (max-width: 768px){
}


/* Page Top Button */

@media (max-width: 768px){
}



/*===== ■5. Form Setting =====*/
/* placeholder */
:placeholder-shown { color: #999;}
::-webkit-input-placeholder { color: #999;}
::-moz-placeholder { color: #999;}
:-ms-input-placeholder { color: #999;}
:focus:placeholder-shown { color: transparent;}
:focus::-webkit-input-placeholder { color: transparent;}
:focus::-moz-placeholder { color: transparent;}
:focus:-ms-input-placeholder { color: transparent;}

label {
  position: relative;
  display: inline-block;
  word-break: break-all;
}

input,textarea {
  width: 100%;
  margin: 0;
  padding: .5rem 1rem;
  box-shadow: none;
  border: 1px solid #ccc;
  background: #f1f1f1;
  color: #333;
  font-size: 1.6rem;
  font-family: 'Roboto Condensed', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}
textarea {
  display: block;
  height: 10rem;
}
input:focus,
textarea:focus { background: #fff; border: 1px solid #666;}

select {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color:#999;
}
select::-ms-expand { display: none;}

input[type="file"] { border: none; background: none;}
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="password"]{ height: 4.5rem;}

input[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 4.5rem;
  height: 4.5rem;
  padding: .5rem;
  background: #000;
  cursor: pointer;
  outline : none;
}

input[type="checkbox"],
input[type="radio"] { outline: none;}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

input[type="checkbox"] + span {
}

input[type="checkbox"] + span,
input[type="radio"] + span {
  display: flex;
  align-items: center;
  padding-left: 3rem;
}
input[type="checkbox"] + span { min-height: 2rem;}
input[type="radio"] + span { min-height: 2.5rem;}


input[type="checkbox"] + span::before,
input[type="checkbox"] + span::after,
input[type="radio"] + span::before,
input[type="radio"] + span::after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  content: '';
}
input[type="checkbox"] + span::before {
  z-index: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid #ccc;
  background: #ebebeb;
}
input[type="checkbox"] + span::after {
	width: 1rem;
	height: 1.5rem;
	margin: 0 .5rem;
}

input[type="checkbox"]:checked + span::before { background: #333; border-color: #333;}
input[type="checkbox"]:checked + span::after {
  border: 3px solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

input[type="radio"] + span::before {
  z-index: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #ebebeb;
  border: 1px solid #ccc;
}
input[type="radio"] + span::after {
	z-index: 1;
	width: 1.5rem;
	height: 1.5rem;
	margin: .5rem 0 0 .5rem;
	border-radius: 50%;
}
input[type="radio"]:checked + span::after { background: #333;}

input[type="button"][name="reset"]{
  background: #fff;
  min-height: 6rem;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #333;
  font-size: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
}
input[type="button"][name="reset"]:hover {
  color: #333;
  border-color: #999;
  background: #fff;
  transition: .5s all;
}

input[type="text"].datepicker + img {
  align-self: center;
  width: auto;
  height: 3.5rem;
  margin-left: 1rem;
  vertical-align: middle;
}

.switch_wrap {
	position: relative;
	width: 5rem;  
	margin: auto; 
}

.switch_wrap label { width: 100%;}

.switch_wrap input[type="checkbox"],
.switch_wrap input[type="checkbox"] + span::before,
.switch_wrap input[type="checkbox"] + span::after { display: none;}

.switch_wrap .swiback {
	display: block;
	height: 2rem;
	padding: 0;
	border-radius: 2rem;
	background: #999;
}
.switch_wrap input[type="checkbox"]:checked + .swiback { background: #0472a2;}

.switch_wrap .swibutton {
	position: absolute;
	top: 0;
	left: 0;
	width: 2rem;
	height: 2rem;
	box-shadow: 0 0 2px rgba(0,0,0,.6);
	border-radius: 50%;
	background: #fff;
	transition: .2s; 
}

.switch_wrap input[type="checkbox"]:checked ~ .swibutton { transform: translateX(3rem);}

.search_wrap,
.select_wrap {
  display: block;
  position: relative;
  height: 45px;
}
.search_wrap input[type="text"],
.select_wrap select {
  padding: 5px 40px 5px 10px;
  font-size: 1.6rem;
}

.select_wrap {
  border: 1px solid #ccc;
  background: #ebebeb;
}

.select_wrap::after {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}


@media only screen and (max-width: 768px){
	textarea { height: 24vw;}
  
	input[type="text"],
	input[type="tel"],
	input[type="number"],
	input[type="email"],
	input[type="date"],
	input[type="password"]{
    height: 12vw;
    padding: 1.34vw 2.67vw;
	}
  
  input[type="submit"] {
    width: 12vw;
    height: calc(12vw + 1px);
    padding: 1.34vw;
  }

	input[type="checkbox"] + span,
	input[type="radio"] + span { padding: 0 0 0 6.67vw;}
  input[type="checkbox"] + span { min-height: calc(5.34vw + .54vw);}
  input[type="radio"] + span { min-height: calc(5.34vw + .27vw);}

	input[type="checkbox"] + span::before {
    width: 5.34vw;
    height: 5.34vw;
	}
	input[type="checkbox"] + span::after {
    width: 2.14vw;
    height: 4vw;
    margin: 0 1.6vw;
	}

	input[type="checkbox"]:checked + span::before { border-width: .27vw;}
	input[type="checkbox"]:checked + span::after { border-width: 0 .8vw .8vw 0;}

	input[type="radio"] + span::before {
    z-index: 0;
    width: 5.34vw;
    height: 5.34vw;
  }
	input[type="radio"] + span::after {
    width: 3.2vw;
    height: 3.2vw;
    margin: 1.07vw 0 0 1.07vw;
	}
  
  input[type="button"][name="reset"]{
    width: 60%;
    min-height: 12vw;
    margin-bottom: 2.67vw;
    padding: 2.67vw 4vw;
    border-color: #666;
    background: #ccc;
    color: #666;
    transition: none;
  }
  input[type="button"][name="reset"]:hover {
    border-color: #666;
    background: #ccc;
    color: #666;
    transition: none;
  }
  
  .switch_wrap { width: 12.5vw;}

  .switch_wrap .swiback { min-height: auto;}

  .switch_wrap .swibutton { box-shadow: 0 0 4px rgba(0,0,0,.4);}
  
  .search_wrap,
  .select_wrap { height: 14.68vw;}
  
  .search_wrap input[type="text"],
  .select_wrap select { padding: 1.34vw 14.67vw 1.34vw 2.67vw;}
  
  .select_wrap::after {
    right: 2.67vw;
    width: 2.67vw;
    height: 2.67vw;
    margin-top: -1.34vw;
  }
}


/* Form Error */
.form_error {
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  border: 1px solid #c00;
  background: rgba(192,0,0,0.1);
  color: #c00;
}

.form_error_input {
  border: 1px solid #c00;
  background: rgba(192,0,0,0.1);
}

p.supplement-text {
  color: #c00;
  margin: 1rem 0;
}