/*
Theme Name: iottokyo-sales
Author URI: https://www.iottokyo.co.jp
Description: アイオーティー東京
*/
@charset "UTF-8";
@font-face {
    font-family: 'DotGothic16-Regular';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/DotGothic16-Regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'FOT-TsukuARdGothic Std';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/FOT-TsukuARdGothic Std.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Lexend Zetta';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/LexendZetta-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-BOLD';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-BOLD.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-BLOND';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-BLOND.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-BLACK';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-BLACK.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-REGULAR';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-REGULAR.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-MEDIUM';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-MEDIUM.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Unbounded-LIGHT';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/UNBOUNDED-LIGHT.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/NOTOSANSJP-VF.TTF') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Tamanegi Kaisho Geki';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/Tamanegi Kaisho Geki .ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'AiharaEdoMoji';
    src: url('https://iottokyo.co.jp/wp-content/themes/iottokyo-original（アイオーティー東京オリジナルテーマ2025）/AiharaEdoMoji.ttf') format('truetype');
    font-style: normal;
}











body{
  background: #F1F0EB;
  font-family: Noto Sans JP ;
  color: #fff;
  letter-spacing: 0.1vh;
  line-height: 2;
  margin: 0;
}
a{
  text-decoration: none;
    color: #fff;
}
a:hover{
  color: #3c434a;
  transition: all 0.3s;
}








/* 
----------------------------------------------- header start -----------------------------------------------
*/

.header {
  width: 38%;
  position: fixed;
  z-index: 30;
  background: #fff;
  color: #000;
  right: 10%;
  top: 15%;
  padding: 1%;
  height: 7%;
}

.header h1 {
  font-weight: 100;
  letter-spacing: 0.3vh;
  font-size: 17px;
}

.header img {
  width: 40%;
  position: relative;
    top: 12%;
    left: 4%;
}


/* 
----------------------------------------------- header end -----------------------------------------------
*/


/* 
----------------------------------------------- contact end -----------------------------------------------
*/



.contactbox {
    width: 38%;
    position: fixed;
    display: flex;
    z-index: 30;
    left: 5%;
    bottom: 0%;
    padding: 1%;
    text-align: center;

}

.contact {

}
.contact img{
  width: 100%;
}
.contact2 img{
  width: 100%;
}



/* 
----------------------------------------------- contact end -----------------------------------------------
*/





/* 
----------------------------------------------- hamburger menu start -----------------------------------------------
*/
.open {
 position: fixed;
 top: 17%;
 right: 12%;
 width: 50px;
 height: 50px;
 display: block;
 cursor: pointer;
 transition: opacity 0.2s linear;
 z-index: 1000;
}

.open:hover {
 opacity: 0.8;
}

.open span {
 display: block;
 float: left;
 clear: both;
 height: 2px;
 width: 40px;
 border-radius: 40px;
 background-color: #000;
 position: absolute;
 right: 3px;
 top: 3px;
 overflow: hidden;
 transition: all 0.4s ease;
}

.open span:nth-child(1) { margin-top: 10px; z-index: 9; }
.open span:nth-child(2) { margin-top: 25px; }
.open span:nth-child(3) { margin-top: 40px; }

.sub-menu {
 transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 height: 0;
 width: 0;
 right: 0;
 top: 0;
 position: absolute;
 background-color: rgba(0, 0, 0, 0.1);
 border-radius: 50%;
 z-index: 18;
 overflow: hidden;
}

.sub-menu li {
 display: block;
 float: right;
 clear: both;
 height: auto;
 margin-right: -160px;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sub-menu li:first-child { margin-top: 150px; }
.sub-menu li:nth-child(1) { transition-delay: 0.05s; }
.sub-menu li:nth-child(2) { transition-delay: 0.10s; }
.sub-menu li:nth-child(3) { transition-delay: 0.15s; }
.sub-menu li:nth-child(4) { transition-delay: 0.20s; }
.sub-menu li:nth-child(5) { transition-delay: 0.25s; }

.sub-menu li a {
 color: #fff;
 display: block;
 float: left;
 padding: 5%;
 letter-spacing: 0;
 font-weight: bold;
 font-family: Unbounded-REGULAR;
}

.open.oppenned .sub-menu {
 opacity: 1;
 height: 400px;
 width: 400px;
}

.open.oppenned span:nth-child(1),
.open.oppenned span:nth-child(3) {
 z-index: 100;
 transform: rotate(45deg);
}

.open.oppenned span:nth-child(1) {
 transform: rotate(45deg) translateY(12px) translateX(12px);
}

.open.oppenned span:nth-child(2) {
 height: 400px;
 width: 400px;
 right: -160px;
 top: -160px;
 border-radius: 50%;
 background-color: rgba(0, 0, 0, 0.1);
}

.open.oppenned span:nth-child(3) {
 transform: rotate(-45deg) translateY(-10px) translateX(10px);
}

.open.oppenned .sub-menu li {
 margin-right: 200px;
 width: 100px;
}

/* 
----------------------------------------------- hamburger menu end -----------------------------------------------
*/



/* 
----------------------------------------------- object start -----------------------------------------------
*/



.s-object {
  position: fixed;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  top: 50%;
  left: -5%;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}



.ss-object {
  position: fixed;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  left: 5%;
  top: -2%;
      z-index: 20;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}




/* 
----------------------------------------------- object end -----------------------------------------------
*/





/* 
----------------------------------------------- firstview right start -----------------------------------------------
*/





.firstview-wrap {
  background-size: cover;
  font-family: Unbounded-REGULAR;
  background: #F1F0EB;
      padding-top: 10%;
    text-align: center;
}


.wrap {
  background: #0A2E57;
}

.wrap2 {
  background: #F1F0EB;
  padding-bottom: 5%;
}

.wrap2 p {
  font-family: AiharaEdoMoji;

}

.contents {
  width: 90%;
}
.title {
  width: 70%;
  padding-bottom: 5%;
}
.guide {
  width: 40%;
}
.effect {
  width: 90%;
}
.tel {
width: 40%;
}
.tel2 {
    font-family: Tamanegi Kaisho Geki;
    font-size: 3vh;
    padding: 2% 6%;
    border-radius: 100vh;
    color: #000;
    background-color: #fff;
    border: 2px solid #0A2E57;
}
.tel2-gr {
  position: absolute;
    width: 100%;
    top: 70%;
}



.wrap a:hover {
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
    border: 2px solid #fff;
}
.center {
  text-align: center;
  z-index: 10;
    position: relative;
}

.wrap2 h1 {
    font-family: Tamanegi Kaisho Geki;
    font-size: 5vh;
    margin-top: 15%;
    text-align: center;
    padding-top: 10%;
    color: #000;
    letter-spacing: 0vh;
    font-weight: 100;
}
.wrap2 h2 {
  font-family: DotGothic16-Regular;
  letter-spacing: 1vh;
  margin-top: 0;
  margin-bottom: 7%;
  font-size: 2vh;
}

.TextTyping span {
	display: none;
  font-family: Unbounded-REGULAR;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/* 
----------------------------------------------- firstview right end -----------------------------------------------
*/





/* 
----------------------------------------------- firstview left start -----------------------------------------------
*/

.top-wrap-fixed {
  position: fixed;
  width: 40%;
  padding-top: 10%;
  padding-left: 5%;
}


.top-wrap-fixed h1 {
  font-size: 5vh;
  font-family: Unbounded-REGULAR;
  margin-top: 0;
  margin-bottom: 0;
}

.top-wrap-fixed h2 {
  font-size: 3vh;
  font-family: Unbounded-REGULAR;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

.menu{
  font-family: Unbounded-REGULAR;
  position: fixed;
  background: rgba(0, 0, 0, 0.1);
  width: 90%;
  top: 10%;
  left: 5%;
  padding: 2% 0%;
}

.menu li {
  position: relative;
  display: block;
  font-size: 2vh;
}
.menu li:hover{
  transform: translate(5%, 0);
  transition: all 1s;
}


    


.wrap-fixed {
  margin: 0 auto;
  margin-top: 22.5%;
  max-width: 100%;
  position: relative;
}

.TextTyping-h1-fixed {
  font-size: 6vh;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 2vh;
  font-family: Unbounded-REGULAR;
}

.TextTyping-fixed {
  text-align: left;
  margin-top: 0;
  font-size: 3vh;
}

.iphone16 {
  width: 45%;
  height: 100vh;
  position: fixed;
  right: 7%;
  margin: 0%;
  padding-top: 0;
  z-index: 40;
  pointer-events: none;
}

.iphone16 img {
  width: 100%;
}
.hidden {
    width: 40%;
    margin: 0%;
    position: absolute;
    right: 10%;
    top: 24%;
    height: 73vh;
    overflow: scroll;
    scrollbar-width: none;

}
.index-container {
  position: relative;
  width: 90%;
  padding: 5%;
      background: #0A2E57;
}
/* 
----------------------------------------------- firstview left end -----------------------------------------------
*/






/* 
----------------------------------------------- scroll start -----------------------------------------------
*/

    .arrowWrap {
        position: fixed;
        right: 0%;
        bottom: 10%;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    .arrowWrap.visible {
        opacity: 1;
    }
.arrowWrap p {
	writing-mode: vertical-rl;
  text-align: center;
  /*transform: rotate(-90deg);　/*文字傾き調整*/
  color:#404040;
  font-family: DotGothic16-Regular ;
  letter-spacing: 1vh;
  font-weight: bold;
  margin: 0;
}
.arrow {
  width: 1px;
  height: 100px;
  margin: 10px auto 0;
  background-color: #eee;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 .1rem #fff, inset 0 0 .1rem #fff, 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color), 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color);
}
.arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #777777;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}
@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}
/* 
----------------------------------------------- scroll end -----------------------------------------------
*/





/* 
----------------------------------------------- post start -----------------------------------------------
*/


.wp-post {
  margin: 3% 10%;
  color: #000;
}
.post {
  display: flex;

      color: #000;
}
.category {
    border-radius: 10vh;
    background-color: #fff;
    color: #fff;
    background: #0A2E57;
    padding: 0% 5%;
    margin-right: 5%;
}

.post-line {
  height: 1px;
  background-color: #000;
}



/* 
----------------------------------------------- post end -----------------------------------------------
*/




/* 
----------------------------------------------- contactform start -----------------------------------------------
*/

main{
  margin:auto;
  z-index: 20;
}
#title,#description{
  text-align:center;
  color:white;
}
input[type=text],input[type=email],input[type=number],input[type=url],input[type=tel], select, textarea {
  width: 100%;
  padding: 12px;
border: 4px solid #0A2E57;
  border-radius: 1vh;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 16px;
  resize: vertical;
    font-family: Noto Sans JP;
  font-size: 2vh;
  height: 7vh;
}

input[type=submit] {
  color: #fff;
  padding: 1% 5%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type=submit]:hover {
  background-color: #18373a;
}


.button {
    height: 7vh;
    font-size: 1.6vh;
    width: 100%;
    padding: 2% 5%;
    border-radius: 10vh;
    color: #000;
    background-color: #fff;
    border: 4px solid #0A2E57;
}
.button:hover {

    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
    border: 4px solid #fff;
}
.here {
    animation: here 0.5s ease-in-out infinite alternate-reverse;
    bottom: -5%;
    left: -5%;
}
@keyframes here {
0% {
    transform: translateX(-20%);
}
100% {
    transform: translateX(20%);
}
}



.container {
  border-radius: 5px;
  margin: 5% 0%;
  padding: 5%;
  color: #000;
  text-align: left;
  box-shadow: 0 0 .1rem #fff, inset 0 0 .1rem #fff, 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color), 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color);
}
.form-group{
  margin: 0 auto 1.25rem auto;
  padding: 1.25rem;
  display: inline-block;
  width:100%;
}

input[type=checkbox] {
  position: relative;
  width: 3vh;
  height: 3vh;
  border: 1px solid #ccc;
  vertical-align: -1vh;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type="checkbox"]:checked:before {
  position: absolute;
  top: 0;
  left: 1vh;
  transform: rotate(50deg);
  width: 1vh;
  height: 2vh;
  border-right: 4px solid #0A2E57;
  border-bottom: 4px solid #0A2E57;
  content: '';
}


/* 
----------------------------------------------- contactform end -----------------------------------------------
*/


/* 
----------------------------------------------- about start -----------------------------------------------
*/


.sns {
  margin: 5% 20%;
  display: flex;
  justify-content: center;
  padding: 0;
}
.sns li{
  background-color: rgba(255,255,255,0.15);
  padding: 5% 6%;
  margin: 1%;
  border-radius: 5px;
  list-style: none;
}



.sns a {
 position: relative;
 top:10px;
}
.sns li:hover {
  opacity: 0.5;
  background-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 .1rem #fff, inset 0 0 .1rem #fff, 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color), 0 0 1rem var(--neon-border-color), inset 0 0 1rem var(--neon-border-color);

}

.snsbtn {
  display: inline-block;
  width: 50px;
  height: 50px;
}
.icon-twitter {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cpath d='M17.77 49.334A30.965 30.965 0 011 44.419a22.254 22.254 0 002.61.153 21.95 21.95 0 0013.59-4.683 10.951 10.951 0 01-10.219-7.6 10.966 10.966 0 004.94-.187 10.946 10.946 0 01-8.779-10.724v-.138A10.9 10.9 0 008.1 22.608 10.951 10.951 0 014.712 8.002a31.058 31.058 0 0022.549 11.43A10.947 10.947 0 0145.9 9.455 21.909 21.909 0 0052.847 6.8a10.973 10.973 0 01-4.81 6.052 21.874 21.874 0 006.283-1.723 22.235 22.235 0 01-5.459 5.663q.032.7.032 1.415c0 14.456-11 31.126-31.126 31.126' fill='%23ffffff'/%3e%3c/svg%3e");
  background-size: 100%;
}

.icon-facebook {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cpath d='M31.528 54.004v-23.72h7.962l1.192-9.244h-9.154v-5.9c0-2.676.743-4.5 4.581-4.5h4.9V2.364a65.555 65.555 0 00-7.139-.36c-7.058 0-11.889 4.308-11.889 12.219v6.817H14v9.244h7.982v23.72z' fill='%23ffffff'/%3e%3c/svg%3e");
  background-size: 100%;
}

.icon-instagram {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cg transform='translate(-317 -13058)' fill='%23ffffff'%3e%3cpath d='M345 13064.685c6.942 0 7.765.026 10.506.152a14.391 14.391 0 014.828.9 8.611 8.611 0 014.935 4.935 14.39 14.39 0 01.9 4.828c.125 2.742.151 3.564.151 10.506s-.026 7.765-.151 10.506a14.391 14.391 0 01-.9 4.828 8.611 8.611 0 01-4.935 4.935 14.391 14.391 0 01-4.828.9c-2.741.125-3.563.151-10.506.151s-7.765-.026-10.506-.151a14.391 14.391 0 01-4.828-.9 8.611 8.611 0 01-4.935-4.935 14.391 14.391 0 01-.9-4.828c-.125-2.742-.152-3.564-.152-10.506s.026-7.765.152-10.506a14.391 14.391 0 01.9-4.828 8.611 8.611 0 014.935-4.935 14.39 14.39 0 014.828-.9c2.742-.125 3.564-.152 10.506-.152m0-4.685c-7.061 0-7.947.03-10.72.156a19.085 19.085 0 00-6.311 1.209 13.3 13.3 0 00-7.6 7.6 19.085 19.085 0 00-1.213 6.316c-.127 2.773-.156 3.659-.156 10.72s.03 7.947.156 10.72a19.085 19.085 0 001.209 6.311 13.3 13.3 0 007.6 7.6 19.085 19.085 0 006.311 1.209c2.773.127 3.659.156 10.72.156s7.947-.03 10.72-.156a19.085 19.085 0 006.311-1.209 13.3 13.3 0 007.6-7.6 19.085 19.085 0 001.217-6.311c.127-2.773.156-3.659.156-10.72s-.03-7.947-.156-10.72a19.085 19.085 0 00-1.209-6.311 13.3 13.3 0 00-7.6-7.6 19.085 19.085 0 00-6.314-1.214c-2.773-.127-3.659-.156-10.72-.156z'/%3e%3cpath d='M345.001 13072.649a13.352 13.352 0 1013.352 13.352 13.352 13.352 0 00-13.352-13.352zm0 22.018a8.667 8.667 0 118.667-8.667 8.667 8.667 0 01-8.667 8.667z'/%3e%3ccircle cx='3.12' cy='3.12' r='3.12' transform='translate(355.759 13069.001)'/%3e%3c/g%3e%3c/svg%3e");
  background-size: 100%;
}

.icon-line {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cpath d='M55.575 24.144C55.575 11.934 43.334 2 28.287 2S1 11.934 1 24.144c0 10.947 9.708 20.115 22.821 21.848.889.192 2.1.586 2.4 1.346a5.608 5.608 0 01.088 2.467s-.32 1.926-.39 2.336c-.119.689-.548 2.7 2.363 1.471s15.715-9.253 21.44-15.843c3.959-4.337 5.853-8.738 5.853-13.625zm-36.915 6.52a.531.531 0 01-.53.531h-7.647a.528.528 0 01-.367-.148l-.008-.007-.007-.008a.526.526 0 01-.149-.367v-11.89a.531.531 0 01.531-.531h1.914a.532.532 0 01.531.531v9.443h5.2a.531.531 0 01.53.531zm4.615 0a.531.531 0 01-.531.53h-1.915a.531.531 0 01-.531-.53v-11.89a.531.531 0 01.531-.53h1.915a.531.531 0 01.531.53zm13.174 0a.531.531 0 01-.531.53h-1.914a.525.525 0 01-.136-.018h-.008l-.036-.012-.016-.006-.026-.011-.025-.013-.015-.008-.033-.02h-.005a.507.507 0 01-.135-.131l-5.456-7.368v7.062a.531.531 0 01-.532.53h-1.914a.531.531 0 01-.531-.53v-11.89a.531.531 0 01.531-.53h2.01l.031.007h.018l.031.01.017.006.031.013.017.008.028.016.016.01.027.019.014.01a.3.3 0 01.028.024l.01.009.032.033a.569.569 0 01.041.054l5.449 7.359v-7.064a.531.531 0 01.531-.53h1.914a.531.531 0 01.531.53zm10.569-9.975a.531.531 0 01-.531.531h-5.2v2.01h5.2a.531.531 0 01.531.532v1.914a.531.531 0 01-.531.531h-5.2v2.01h5.2a.531.531 0 01.531.531v1.915a.531.531 0 01-.531.531h-7.643a.528.528 0 01-.367-.149l-.008-.007-.007-.008a.528.528 0 01-.149-.367V18.776a.528.528 0 01.148-.366l.008-.009.006-.006a.528.528 0 01.369-.15h7.647a.531.531 0 01.531.532z' fill='%23ffffff'/%3e%3c/svg%3e");
  background-size: 100%;
}

.icon-youtube {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cpath d='M27.838 46.245c-5.955-.188-11.619-.334-17.282-.553a19.617 19.617 0 01-3.65-.521 6.055 6.055 0 01-4.57-4.066 21.643 21.643 0 01-1.033-5.455 105.27 105.27 0 01-.188-13.079 32.656 32.656 0 01.824-7.332 7.551 7.551 0 012.034-3.859 6.758 6.758 0 014.276-1.825c4.464-.219 8.918-.49 13.382-.532 6.008-.063 12.026.021 18.033.136a72.031 72.031 0 017.791.521 6.064 6.064 0 015.055 3.92 18.326 18.326 0 011.147 5.486 104.481 104.481 0 01.188 14.112 30.357 30.357 0 01-.907 7.113 6.6 6.6 0 01-5.142 5.038 18.943 18.943 0 01-3.254.355c-5.67.201-11.332.375-16.704.541zM22.07 34.387c4.756-2.461 9.46-4.9 14.258-7.395-4.787-2.5-9.491-4.954-14.258-7.447z' fill='%23ffffff'/%3e%3c/svg%3e");
  background-size: 100%;
}

.icon-mail {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3e%3cg fill='none'%3e%3cpath d='M7 9h42.708a3 3 0 013 3v31.884a3 3 0 01-3 3H7a3 3 0 01-3-3V12a3 3 0 013-3z'/%3e%3cpath d='M8 13v29.884h40.708V13H8M7 9h42.708a3 3 0 013 3v31.884a3 3 0 01-3 3H7a3 3 0 01-3-3V12a3 3 0 013-3z' fill='%23ffffff'/%3e%3cpath d='M7.5 18.842l20.743 10.372 20.743-10.372' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='round' stroke-width='4'/%3e%3c/g%3e%3c/svg%3e");
  background-size: 100%;
}

/* 
----------------------------------------------- about end -----------------------------------------------
*/


/* 
----------------------------------------------- footer start -----------------------------------------------
*/

.footer {
position: fixed;
    right: 0%;
    bottom: 10%;
    writing-mode: vertical-rl;
    text-align: center;
    color: #404040;
    font-family: Unbounded-REGULAR;
    letter-spacing: 0.5vh;
    font-size: 1vh;
    display: none;
    font-weight: bold;

}

/* 
----------------------------------------------- footer end -----------------------------------------------
*/





/* 
----------------------------------------------- responsive start -----------------------------------------------
*/

/* スマホ（〜767px） */
@media screen and (max-width: 767px) {
  body,.header h1 { font-size: 25px; }
  .header h1 {margin: 0;}
  .iphone16,.top-wrap-fixed {display: none;}
.hidden {width: 90%; right: 0%; top: 10%; padding: 5%; height: 100vh; overflow: unset;}
  .firstview-wrap {margin: 0%;}
  h3,.container {margin: 5% 0%; font-size: 30px;}
  .header img {width: 40%;}
  .open {width: 200px; height: 200px; top: 3.4vh; right: 2.5vh;}
  .open span {width: 80px;}
  .header {padding: 5%; height: 7vh; margin: 0; width: 90%; position: fixed; z-index: 30; background: #fff; color: #000; right: 0;top: 0; }
  .open span:nth-child(1) { margin-top: 20px;}
  .open span:nth-child(2) { margin-top: 50px; }
  .open span:nth-child(3) { margin-top: 80px; }
  .open.oppenned .sub-menu,.open.oppenned span:nth-child(2)  {height: 700px; width: 700px;}
  .open.oppenned .sub-menu li {width: 200px;}
  .open.oppenned span:nth-child(1){transform: rotate(45deg) translateY(30px) translateX(30px);}
  .footer {display: none;}
  .wp-post {margin: 3% 5%; text-align: left;}
  .post-line {margin: 3% 0%; }
  .button {font-size: 25px;}
  .service {margin: 5% 10%;}
  .menu, .sp-ss-object,.sp-s-object, .top-wrap-fixed,.iphone16 {display: none;}
  .firstview-wrap h1 { font-size: 8vh; margin-bottom: 0;}
  .firstview-wrap p { font-size: 5vh; }
.firstview-wrap h2 { font-size: 2.5vh; }
.firstview-wrap h4 { font-size: 2.5vh; }
.Word p { font-size: 2vh; }
.header a { top: 3.5%; position: fixed;}
.sub-menu li a {font-size: 2vh;}
.open.oppenned .sub-menu li {margin-right: 40%;}
.title { width: 100%;}
.tel2 {font-size: 2vh; border: 4px solid #0A2E57;}
.contactbox {background: #0A2E57; left: 0%; width: 100%;}
.contact {width: 40%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%;}
.contact2 {width: 40%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%;}
.ss-object {display: none;}
.s-object {display: none;}
.index-container {padding-bottom: 30%};
}





/* タブレット縦（768〜1023px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body,.header h1 { font-size: 25px; }
  .header h1 {margin: 0;}
  .iphone16,.top-wrap-fixed {display: none;}
.hidden {width: 90%; right: 0%; top: 10%; padding: 5%; height: 100vh; overflow: unset;}
  .firstview-wrap {margin: 0%;}
  h3,.container {margin: 5% 0%; font-size: 30px;}
  .header img {width: 40%;}
  .open {width: 200px; height: 200px; top: 3.4vh; right: 2.5vh;}
  .open span {width: 80px;}
.header {padding: 5%; height: 7vh; margin: 0; width: 90%; position: fixed; z-index: 30; background: #fff; color: #000; right: 0;top: 0; }
  .open span:nth-child(1) { margin-top: 20px;}
  .open span:nth-child(2) { margin-top: 50px; }
  .open span:nth-child(3) { margin-top: 78px; }
  .open.oppenned .sub-menu,.open.oppenned span:nth-child(2)  {height: 700px; width: 700px;}
  .open.oppenned .sub-menu li {width: 200px;}
  .open.oppenned span:nth-child(1){transform: rotate(45deg) translateY(30px) translateX(30px);}
  .footer {display: none;}
  .wp-post {margin: 3% 5%; text-align: left;}
  .post-line {margin: 3% 0%; }
  .button {font-size: 25px;}
    .service {margin: 5% 10%;}
      .menu, .sp-ss-object,.sp-s-object, .top-wrap-fixed,.iphone16 {display: none;}
      .firstview-wrap h1 { font-size: 8vh; margin-bottom: 0; }
      .firstview-wrap p { font-size: 5vh; }
.firstview-wrap h2 { font-size: 2.5vh; }
.firstview-wrap h4 { font-size: 2vh; }
.Word p { font-size: 2vh; }
.header a { top: 3.5%; position: fixed;}
.sub-menu li a {font-size: 2vh;}
.open.oppenned .sub-menu li {margin-right: 40%;}
.title { width: 100%;}
.tel2 {font-size: 2vh; border: 4px solid #0A2E57;}
.contactbox {background: #0A2E57; left: 0%; width: 100%;}
.contact {width: 40%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%;}
.contact2 {width: 40%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%;}
.ss-object {display: none;}
.s-object {display: none;}
.index-container {padding-bottom: 30%};
}





/* タブレット横 / 小型PC（1024〜1279px） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  body,.header h1 { font-size: 16px; }
}

/* PC（1280〜1439px） */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  body,.header h1 { font-size: 17px; }
}

/* 大画面（1440px〜） */
@media screen and (min-width: 1440px) {
  body,.header h1 { font-size: 18px; }
}





/* 
----------------------------------------------- responsive end-----------------------------------------------
*/