charset "UTF-8";
/*!
* Theme Name:   port
* Description:  Just a sample theme aiming to learn how to create wordpress theme

*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
/* font-size: 100%;*/
  vertical-align: baseline;
}
html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
a{
  text-decoration: none;
}
body{
 background-color:rgb(5, 3, 3) ;
	/*background-color:red;*/
}

h2 {
      font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
      font-size: calc(3rem + ((1.5vw - 0.96rem) * 0.7143));/* 20px~24pxで可変*/
      line-height: 1.3;
  }
p{
        font-size: 2rem;
     }
h2,h3{
  color:white;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
h3{
  letter-spacing: 0.1em;
  line-height:1.5;
}
html{
font-size: 62.5%; 
  }
body{
     font-size:2rem;
      padding:0;
      margin:0;     
 }

h2 {
   
      line-height: 1.3;
	 font-family: 'Times New Roman', Times, serif;
  }
p{
        font-size: 2rem;
     }
li{
    list-style: none;
}
 a{
    text-decoration: none;
  }
   h3{
        margin-bottom: 30px;
     }
/**************************************
 * ** font **************/
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@font-face {
  font-family: 'MonotypeCorsiva';
  src: url('monotype-corsiva-bold-italic.otf') format('truetype');
}
@font-face{
  font-family:'Emmeline';
  src:url('Emmeline-Regular.otf') format('truetype');
}
@font-face{
  font-family:'Antro_Vectro';
  src:url('Antro_Vectra_Bolder.otf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@font-face {
  font-family: 'MonotypeCorsiva';
  src: url('monotype-corsiva-bold-italic.otf') format('truetype');
}
h1{
  font-family: "Poiret One",sans-serif;
  font-weight: 400;
  font-style: normal;
  color:white;
  font-size: calc(32px + 10vw);
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
  margin-right:auto;
	margin-left:auto;
	
}


/******************************************************************/
/**********    header  *****************/
header{
  background:url("http://exe1.happyhappysmile.com/wp-content/uploads/2024/05/spring-6148969_1280.jpg") no-repeat;
  width:100vw;
  height:100vh;
  padding:0;
  margin:0;
  object-fit: cover;
  object-position: 50% 50%;
	border:1px solid white; 
}
.divA{
	margin-top:20vh;
}
/*******************************
 * ****  nav  **********/


.nav a{
	color:white;
	border-bottom:1px solid white;
	margin-left:2%;
	
}

.nav:hover a{
	color:white;
	border-top:1px solid white;
	
}


/**************  about  zone **********************************/
.about,.zone{
  display:flex;
  width:80vw;
  margin:0 auto;
  justify-content: space-between;
	
}

.left{
  width:50vw;

}
.img{
  width:30vw;
  aspect-ratio:4/3;
}

.img img{
  width:100%;
  height:100%;
  object-fit: cover;
  
}
.about-img img{
  object-position: center;
}
.zone-img img{
  object-position: left;
}
/**************** servide  *********/
.service-text h3{
  white-space:pre-wrap;
}
.service{
  width:80vw;
  margin:0 auto;
}
/***********  demo  works *****************/
.demo {
/*  display:flex;*/
  width:80vw;
	margin:0 auto;
  
}
.demo-text{
	height:3em;
  white-space: pre-wrap;
	width:30vw;
	/*margin-top:-30em;*/
	color:white;
}
#yoko {
    overflow-x: auto; /* overflow-x: auto; ではなく scroll を使用 */
  white-space: nowrap;
    list-style: none;
    padding: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
	display:flex;
	/*width:90vw;*/
	margin:0 auto;
}


/*.demo ul li{
  width:50vw;
}*/
#yoko li{
	width:40vw;
}
.demo li video{
  width:100%;
  aspect-ratio: 4/3;
}

/*.demo{
	display:flex;
	width:90vw;
	margin:0 auto;
	justify-content:space-between;
}*/

.works-sec{
  width:80vw;
  margin:0 auto;
}
.title{
  margin-top:10vw;
}
.demo-text{
	 white-space:pre-wrap;
}

#yoko::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge, and Opera */
}

#yoko li {
    flex: none;
	display:inline-block;
}
/*************  icon  *************/
.icon ul{
  display:flex;
  margin:0 auto;
  width:30vw;
justify-content:center;
	align-items:center;
}

.contact .icon  li:hover{
  border-bottom:3px solid white;
  border-top:3px solid white;
}
.icon li{
  display:inline-block;
	margin:0 10px;
		text-align:center;
}
.icon p{
 color:white;
	
}
.contact{
  width:80vw;
  margin-right:auto;
	margin-left:auto;
}
.elsie-regular {
  font-family: "Elsie", serif;
  font-weight: 400;
  font-style: normal;
}





/**************+++++*/

/**********************************************************************************************************************************************************/


/******************  contactform  **********************************/

 .main-form{
  width:100vw;
  height:100vh;
  background-color: black;
  margin:0 auto;
 }
.main-form h2{
    margin-right:auto;
	margin-left:auto;
	margin-top:10vh;
	margin-bottom:-20vh;
	width:30vw;
	text-align:center;
	
 }
#contact-form{
	margin:0 auto;
	max-width:100%;
	padding-top:30vh;
  height:100vh;
  width:100%;
}
.contact-form{
  width:60vw;
  height:40vh;
  background-color: white;
  margin-right:auto;
  margin-left:auto;
  padding-top:10vh;
  border-radius: 1vw;
}
#contactf{
	width:60%;
	margin:0 auto;
	text-align:center;	
	
}

.contactp{
	font-size:2rem;
	text-align:center;
	margin:0 auto;
	width:60%;
}
#p5 h3{
	text-align:center;
	margin:0 auto;
	
}
.wpcf7 input[type="submit"]{
  border:1px solid black;
  width:15rem;
 /* aspect-ratio: 5/1;*/
  border-radius: 2rem;
  border:1px solid gray;
  font-size:2.5rem;
  background-color: black;
	margin-top:3vw;
color:white;
float:right;
 
  
}
.wpcf7 input[type="submit"]:hover{
  background-color: gray;
  color:black;
}

.wpcf7 input[type="text"],.wpcf7 input[type="email"]{
  border:3px solid white;
  background-color: white;
  border-bottom: 2px solid black;
  width:70%;
  font-size: 2.5rem;
	 color:black;
  font-family: 'Times New Roman', Times, serif;
}
.wpcf7 input[type="text"]{
  float:left;
}
.wpcf7 input[type="email"]{
  float:right;
	
}
.wpcf7 textarea{
 border:3px solid white;
  background-color: white;
  border-bottom: 2px solid black;
  width:100%;
	padding:0;
	margin:0;
	max-width:100%;
  aspect-ratio: 5/1;
  font-size:2.5rem;
 /* font-weight: bold;*/
float:left;
	 color:black;
  font-family: 'Times New Roman', Times, serif;

}
.name-email{
  display:flex;
}
  
/****************************************************************************************************************/
@media screen and (max-width: 640px){
	
	.wpcf7 input[type="text"],.wpcf7 input[type="email"]{
		width:90%;
		padding:0.5%;
		margin:0;
    margin:0 auto;
	}
	#contactf{
		max-width:100%;
		width:100%;
		padding:0;
		margin:0;
	}
	.wpcf7 textarea{
		width:90%;
	}
  .contact-form{
    width:80vw;
  }
	.zone,.about{
		display:block;
		width:80vw;
	}
	.left,.img{
		width:100%;
	}
	.demo-ul,#yoko{
		display:block;
		width:80vw;
	}
	#yoko li {
        display: block;
        width: 80vw;
    }
   .demo-text{
	   width:80vw;
}
}
/********************************************************************************************************************************************/