*{
	margin: 0;
	padding: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	width: 100%;
	text-align: center;
}
html {
  overflow-x: hidden;
}
body{
    margin: 0px;
    overflow-x: hidden;
    margin: 0px;
    overflow-y: clip;
}
h2,h3{text-align:left;}
.midashi h1 {letter-spacing: 0.15em;
    font-family: serif;
    font-size: 2.5vw;
    color: #525252;
}
h4{
    font-size: 1.3rem;
    line-height: 1.6em; 
    float: left;}
p{
    font-size: calc(0.5rem + 1vw);
    line-height: 2em;
    letter-spacing: 0.1em;}

form a{ line-height: 1.5em; color:white;}
footer a{color:#404040;}
ul{margin: 20px 0;}
li{list-style: none; font-size: 1.1rem; line-height: 1.5em;}
small{font-size: 1.0rem; padding: 8px 0; float: left; margin-top:20px;}
td{line-height: 1.8em;}
table{border-spacing:0;font-size: 1.4rem;}




/*///////////////////////////////////////////////////////////////////////////////////////////////////////トップページアニメーション///////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/*ページ遷移時フェードイン*/
body {
  animation: fadeIn 1.0s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.moveTop {
animation-fill-mode: forwards;
  animation: moveTop 1.5s ease-out;
}
@keyframes moveTop {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}




/*メイン画像文字フロート*/
.float1,.float4,.float6,.float13,.float11 {
    font-size: 1.5vw;
    line-height: 1.1em;
    text-align: left;
  animation: float-a 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
    position: absolute;
}
.float2,.float3,.float5,.float7,.float9,.float14 {
    line-height: 1.1em;
    text-align: left;
  animation: float-b 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  font-size: 1.3vw;
    position: absolute;
}
.float10,.float12,.float15,.float8 {

    line-height: 1em;
    text-align: left;
  animation: float-c 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
    position: absolute;
} 
@keyframes float-a {
   0% {
    transform: rotate(0deg) translate(0, 0);
  }
  20% {
    transform: rotate(2deg) translate(-2px, 1px); /* 左上に少しブレる */
  }
  40% {
    transform: rotate(4deg) translate(1px, -2px); /* 右上に少しブレる */
  }
  60% {
    transform: rotate(2deg) translate(-1px, 2px); /* 左下に少しブレる */
  }
  80% {
    transform: rotate(0deg) translate(2px, -1px); /* 右下に少しブレる */
  }
  100% {
    transform: rotate(-2deg) translate(0, 0);      /* 元に戻る */
}
}

@keyframes float-b {
  0% {
    transform:translate(0, -10px) rotate(0deg);
  }
  50% {
    transform:translate(0, 0) rotate(-8deg);
  }
  100% {
    transform:translate(0, 10px) rotate(8deg);
  }
}

@keyframes float-c {
   0% {
    transform: rotate(-3deg) translate(0, 0);
  }
  25% {
    transform: rotate(-3deg) translate(6px, 0px); /* 左上に少しブレる */
  }
  40% {
    transform: rotate(-3deg) translate(1px, 0px); /* 右上に少しブレる */
  }
  50% {
    transform: rotate(-3deg) translate(0px, 0px); /* 右上に少しブレる */
  }
  60% {
    transform: rotate(-3deg) translate(-1px, 0px); /* 左下に少しブレる */
  }
  75% {
    transform: rotate(-3deg) translate(-6px, 0px); /* 左下に少しブレる */
  }
  100% {
    transform: rotate(-3deg) translate(0, 0);      /* 元に戻る */
}
}



/*タイピングアニメーション*/
.typing {
}
 
.typing-effect {
  animation: typing 3s steps(23), effect .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
}
 
@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes effect {
  50% {
    border-color: transparent
  }
}



/*/////////////////////////////////////////////////////////////////////////////////////////////トップページアニメーション文字の細かい配置/////////////////////////////////////////////////////////////////////////////////////////////////////*/
.left{
    left: 3vw;
    position: absolute;
    width: 34%;
    text-shadow: 2px 2px 2px rgb(0 0 0);
}



.right{ 
    text-shadow: 2px 2px 2px rgb(0 0 0);
    right: 3vw;
    position: absolute;
    width: 34%;
    top: 18vw;"
}

.top-animation{
    z-index: -1;
    position: relative;
  background-position:center 8vw;
  background-blend-mode: lighten;
  background: linear-gradient(to bottom, #1c1c1c 0%, #ffffff 70% 70%, #fff 100%), url(../img/mainpeople.png) no-repeat center 0 / auto 45%;
    height: 140vw;
    margin-bottom: 20vw;
  width:100%;
  display:block;
  color:white;
}

.monotsukuri{
    background: linear-gradient(transparent 50%, #ffffff5c 50%);
	    width: 95%;
	    text-align: center;
	    font-size: 6vw;
	    transform: rotate(-5deg);
	    display: block;
	    position: absolute;
	    font-family: serif; 
    margin-top: 25px;
}

.ideadake{
    margin-left: calc(-50px + -2vw);
    margin-top: calc(100px + 12vw);
    font-size: calc(0.5rem + 1.5vw);
}

.atarashiikoto{
    display: list-item;
    font-size: calc(1rem + 3vw);
    margin-top: calc(60px + 12vw);
    margin-left: calc(-30px + 15vw);
    font-family: system-ui;
    writing-mode: vertical-rl;
    list-style: none;
    height: calc(50px + 25vw);
    width: auto;
    line-height: 1em;
    text-decoration: underline;
    top: calc(100px + 4vw);
}

.yunyuushitaisyouhin{
    border-radius: 32vw;
    background: #ffffff9e;
    display: table;
    font-size: 2vw;
    padding: calc(0vw + 1px);
    letter-spacing: 0.2em;
    margin-top: calc(2vw + 150px);
    margin-left: calc(100% + 0px);
    text-align: center;
    width: 88%;
}

.kaigaidewadai{
    padding: 1.5vw;
    border-radius: 2vw;
    border: 1px solid #ffffff70;
    display: block;
    width: calc(15vw + -15px);
    line-height: 1.3em;
    font-weight: bolder;
    text-align: center;
    text-decoration: underline;
    margin-top: calc(15vw + 100px);
    margin-left: calc(26vw + -50px);
    font-size: calc(0.5rem + 1.5vw);
}

.nihonnihanai{
    line-height: 3vw;
    width: 70%;
    background: radial-gradient(rgb(255 255 255), rgb(255 255 255 / 0%));
    padding: 10px;
    margin-top: calc(25vw + 200px);
    margin-left: calc(20vw + -32px);
    font-size: calc(0.3rem + 1.5vw);


}

.kaigaikarasekkaku{
	    display: block;
	    width: 31vw; 
    margin-top: calc(30vw + 250px);
    margin-left: calc(23vw + 0px);
    font-size: calc(0.3rem + 1vw);
}

.kiseihindehanaku{
    position: absolute;
    width: 42vw;
    display: inline-block;
    border: 3px dotted;
    padding: 1vw;
    font-size: 2vw;
    margin-top: calc(36vw + 280px);
    margin-left: calc(-5vw + 0px);
}


.demoyusyutsu{
    width: 5vw;
    font-size: calc(5px + 3vw);
    font-family: serif;
    writing-mode: vertical-rl;
    height: 60vw;
    position:absolute;
    margin-top: calc(-1vw + 100px);
    margin-left: calc(-18vw + 10px);

}

.eigoga{
    border: 1px solid;
    background: #ffffff8a;
    padding: 1vw;
    letter-spacing: 0.4em;
    margin-top: calc(-15vw + 100px);
    margin-left: calc(0vw + -100px);
    font-size: calc(0.3rem + 1vw);
	width:60%;
}

.syoruigamuzukashii{
    background: gray;
    width: 20vw;
    padding: 1vw;
    display: inline-block;
    font-size: 2vw;
    margin-left: calc(-10vw + -5px);
    margin-top: calc(-7vw + 105px);
}

.kaigaisoukin{
    font-size: 2vw;
    margin-top: calc(8vw + 50px);
    margin-left: calc(-10vw + 0px);

}

.ensouba{
    background: radial-gradient(rgb(255 255 255), rgb(255 255 255 / 0%));
    border: 2px solid white;
    padding: 1vw;
    text-align: center;
    border-radius: 1vw;
    font-size: calc(5px + 1vw);
    width: calc(60px + 2vw);
    margin-left: -10vw;
    margin-top: calc(12vw + 100px);

}

.hasonshinaide{
    border: 2px solid white;
    padding: 1.5vw;
    border-radius: 1vw;
    margin-top: calc(2vw + 190px);
    margin-left: calc(4vw + -36px);
    font-size: calc(5px + 1vw);
    width: calc(60px + 2vw);

}
.nanikarahajimereba{
    font-family: serif;
    letter-spacing: 0.2em;
    width: 60%;
    border: 1px solid;
    text-decoration: underline;
    padding: 0.5vw;
    margin-top: calc(15vw + 200px);
    margin-left: calc(-10vw + 15px);
    font-size: calc(5px + 2vw);
}

.yasuikoujou{
	padding: 2vw; 
    position: absolute;
    margin-top: calc(280px + 40vw);
    margin-left: -30vw;
	font-size: 3vw;
	border-right: 3px solid gray;
	width: 62vw;
	text-shadow: 2px 2px 2px rgb(0 0 0);
    	letter-spacing: 0.2em;
}



.midashi{
    display: block;
    position: relative;
    z-index: -1;
    margin-top: calc(100vw + 80px);
    width: 50%;
    float: right;
}
.midashi h2{
    text-align: center;
    margin-top: 10px;
    color: #525252;
    font-size: 1.5vw;
    line-height: 1.1em;
}



/*h1の西田通商にお任せください*/
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}





/*メイン画像2拡大*/

.wrapper {
    position: absolute;
    top: calc(90vw + 100px);
    width: 98%;
    margin: 0 3%;
}

.container {
}

.mask {
    width: 25%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.mask img {
}


/*10秒後表示*/


.later {
  opacity: 0;
  animation: later 0.75s ease 5s forwards, rotate 5s infinite linear;
}

@keyframes later {
  to {
    opacity: 1;
    transform: translate(0, -50px);
  }
}






/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////本文////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.anatano{
    width: 70%;
    font-size: calc(0px + 3vw);
    font-weight: bold;
	margin-left:auto;
	margin-right:auto; 
    margin-top: calc(165px + 30vw);
}

section{
	color: #525252;
	display:inline-block;
    margin-bottom: calc(10px + 10vw);
    margin-top: calc(60px + 5vw);
}

section h2 {
    width: auto;
    font-size: calc(8pt + 2vw);
    border: 1px solid;
    text-align: right;
    padding-right: 50px;
    padding-left: calc(10px + 6vw);
    background: #fbe01a;
    color: gray;
    display: flex;
    left: 0;
    position: absolute;
}

section h2::before {
    content: '';
    border: 1px solid gray;
    display: inline-block;
    width: 92vw;
    margin-top: 3vw;
    position: absolute;
	z-index:-100;
}

section h3{
	display:block;}

section h3,section ul li{
    font-size: calc(6pt + 1vw);
}

section h3:first-of-type {
    font-size: calc(0.5rem + 1vw);
margin-top: calc(50px + 7vw);
}

section h3,section p{
    width: 60%;
    margin-top: calc(10px + 3vw);
    text-align: left;
    margin: auto 20%;
    float: left;
}
.oem-detail {
    margin-top: calc(10px + 3vw);
    font-size: calc(10px + 0.5vw);
}

.oem{
    border: 2px solid saddlebrown;
    box-shadow: 10px 10px 0px 2px rgba(0, 0, 0, 0.5);
    width: 60%;
}


.icon{
    float: left;
    margin-left: 20%;
    margin-top: calc(30px + 5vw);
    width: calc(55px + 3vw);
}
.icon-detail{ 
    height: calc(55px + 3vw);
    margin-top: calc(25px + 5vw);
	margin-bottom: calc(-10px + 5vw);
    width: 47%;
    margin-left: 10px;
    text-align: left;
    float: left;
    display: flex;
    align-items: center;
}
.yunyuuyusyutsunyuu{ 
    float: left;
    width: 70%;
    margin: auto 15%;
}

section ul{
    display: inline-block;
    border: 1px solid gray;
	float:left;
    width: 44%;
    margin: 2%;
    padding: 4px;
}

section ul li{
	text-align:left;
    font-weight: bold;
}
section ul li:first-child {
    background: gray;
    color: white;
    display: inline-block;
    margin: auto auto 20px -20px;
    padding: 10px 10px;
}

section ul li span{
    font-size: 75%;
    float: left;
    text-align: left;
    margin: -5px auto 20px 10%;
    font-weight: lighter;
    width: 90%;
}

.midashi2{
    width: 100%;
    margin: 0;
    font-size: calc(9pt + 2vw);
    font-weight: bold;
    font-family: serif;
    background: linear-gradient(transparent 50%, #ffe007 50%);
    display: inline;
    float: none;
}



.support{
    width: calc(90% + -20vw);
    margin: auto 20%;
    display: inline-block;
}



/*========= モーダル表示のためのCSS ===============*/



.Open {
    border: none;
    width: auto;
    background: none;
    cursor: pointer;
}
.Close::after {
	display:none;
}

.mobile_modal .Close,.Close{
    background-color: #B9314F;
    position: absolute;
    top: 10px;
    right: 12px;
    border-radius: 50%;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600; 
    width: 40px;
    height: 40px;
    font-size: 20px;
}

#Modal1{
    height: 100%;
    background: rgb(0 0 0 / 60%);
}

#Modal1 .inner-modal{
    border: none;
    border-radius: 9px;
    box-shadow: 0 10px 20px -5px #000;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 50%;
    position: absolute;
    background: white;
}

#Modal1 {
	height:100%;
    border-radius: 10px;
}


#Modal1 iframe{
	height:100%;
    border-radius: 10px;}

/* ふわっと表示 */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*========= モーダル表示のためのCSS 終わり===============*/




/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////フォーム/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*トップページフォーム*/
.form{

        background: #9bd4db;
}
.form h2{
	margin-top:-20px;	
}
.form h2::before{
	display:none;
}
.top_form dd input,.top_form dd textarea{
	text-align:left;
}
.top_form dl dt{
        color: white;
    font-size: 0.8em;
    text-align: left;
    margin-top: 5px;
}

.top_form{
    width: 30%;
    margin: 130px 15% auto auto;
    padding: 3% 5% 0 5%;
}


#button_entry{
    margin: 20px 0 0 0;
    padding: 10px 0;
    float: left;
    background: #f8e025;
    color: #808080;
    font-weight: bolder;
}

.top_form_exp{
	color:white;
    float: left;
    font-size: 1.6em;
    width: 30%;
    margin: 0px auto auto 15%;
	white-space: nowrap
}

.top_form_exp dl dt{
    color: white;
    text-align: left;
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: 0.2em;
}


.top_form_exp h3,
.top_form_exp h4,
.top_form_exp span{
	color:white;
	margin-top:10px;
}

.top_form_exp h4:nth-of-type(2),
.top_form_exp h4:nth-of-type(3){
    float: left;
    margin: 40px auto 0px auto;
}



.top_form_exp span{
	float:left;
    font-size: 0.6em;
    line-height: 0.5em;
	white-space: nowrap
}
.memo{ 
    width: 20%;
    margin: 0px auto 0 50%;
    padding: 0 5% 5% 0;
    text-align: left;
    float: left;
}
.memo ul{ 
    display: flex;
    justify-content: center;
	margin-bottom:0;
}

.memo li{ 
    padding: 30px 5px 0 5px;
    width: 141px;
    float: right;
}
.memo button{
	font-size:70%;
}


.top_form_exp span a,
#top .memo ul li button{
	color:white;
}


/*フォーム終わり*/

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////フッター/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer{
    clear: left;
	width:90%;
    border-top: 1px solid #d9d9d9;
    padding: 50px 5%;
}
footer h4{
	font-size:15px;
    text-align: left;
}
footer span ul li{
	float:left;	
    text-align: left;
    white-space: nowrap;
}
footer span ul li a{
	font-size:12px;
}

footer span ul{
	margin: 0;
}
footer span{
	float:left;
    padding: 1%;
}
footer span span{
	float:left;
	padding: 3px;
	font-size:12px;
	text-align: left;
}
.sns ul li{
    width: 29%;
    margin: 2%;
}

/*メニューホバーで下線*/

footer span ul li a{
  position: relative;
  text-decoration: none;/*デフォルトで下線を非表示*/
}
footer span h4:nth-of-type(2) {
    margin-top: 25px;
    display: inline-block;
}
.footer_menu  ul li a:after{
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    width: 0;
    height: 1px;
    background-color: #666;
    transition: .3s;
}



footer span ul li a:hover:after {
  width:100%;
}
.footer_menu{
	margin-top:10px;
	width:17%;
}
.sns{
	width:25%;
	max-width:265px;
}
.fotter_wrapper{
    display: flex;
    justify-content: center;
}

.mobile_modal button{
	display:none;
}





/*///////////////////////////////////////////////////////////////////////////////////////////////////////メディアハック大きい画面/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



@media (min-width: 1024px){
.typing,.later,.left,.right {
    padding:auto 10%;  
 transform: scale(0.7);
}
}





/*///////////////////////////////////////////////////////////////////////////////////////////////////////メディアハック小さい画面/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


@media (max-width: 800px){



section h3,section p,.oem{
    width: 80%;
    margin: auto 10%;
}
.form h3:first-of-type {
    margin-top: 10vw;
}
.icon{
    margin-left: 10%;
}

.icon:nth-child(4 of .icon) {
	margin-top:150px;
}

.top-animation{
	background: linear-gradient(to bottom, #1c1c1c 0%, #ffffff 70% 70%, #fff 100%), url(../img/mainpeople.png) no-repeat center 18vw / auto 55%;
}


.kaigaidewadai{
    width: calc(80px + 1vw);
    font-size: calc(0.5rem + 0.5vw);
    padding: 1vw;
}


.yunyuuyusyutsunyuu{ 
    width: 80%;
    margin: auto 10%;
}


section ul{
    width: 94%;
}

.icon-detail{
    width: calc(-70px + 70vw)
}


.form{
	background:#9bd4db;
    width: 84%;
}

.top_form_exp h4:nth-of-type(2),
.top_form_exp h4:nth-of-type(3){
	margin-top:3vw;
}
.top_form_exp{
    width: 80%;
        margin: auto 10% 50px 10%;
    text-align: center;
}

.top_form_exp h3,
.top_form_exp h4{
    text-align: center;
	font-size: 3vw;
}

.top_form_exp span{
}
.top_form{
    width: 70%;
    margin: 10%;
    border-left: none;
}
.memo{ 
        width: 65%;
        margin:-5px auto auto 16%;
        float: left;
}





footer span {
    float: none;
    padding: 20px;
}

.footer_menu {
	display:none;
}

footer span img{
	width:50%;
	margin-bottom:20px;
}
footer h4{
    text-align: center;
}
footer span span{
	float:none;
display: block;
    text-align: center;
}
.fotter_wrapper{
	display:block;
}

.sns{
        max-width: 300px;
        width: 80%;
        margin: 0 auto;
        display: block;
}
.sns ul li{
	text-align:center;
        margin-bottom: -10%;
}
.sns ul li img{
	width:80%;}
.mobile_modal{
	float:left;
        margin-top: 30px;
}
.mobile_modal button{
        display: inline;
        width: 100%;
        font-size: 80%;
}

small{
        background: #1b66c3;
        color: white;
        margin: 10px 0% -50px -5%;
        width: 110%;
        padding: 0;

}
}