@charset "utf-8";
/* 基本色 */
:root{
	--main-color: #eee8d6;
	--accent-color: #e6c79a;
	--accent-color: rgb(193, 157, 154);
	--accent-color: #534151;
  --accent-color: #ece4e7;
  --accent-color: #293d46;
}


/* 共通設定 */

html{
  font-size: 100%;
  /* scroll-behavior: smooth; */
}
body{
  text-align: center;
  font-family: "Times New Roman", 'Noto Serif JP',"MS P明朝";
  color: #534151;
  text-justify: auto;
}
img{
  width: 100%;
  vertical-align: bottom;
}
a{
  text-decoration: none;
  color: #534151;
}
small{
  padding-bottom: 10px;
}

.arrow2{
  width: 1.5%;
  color: #534151;
  padding-top: 2px;
}

h3{
  color: #293d46;
  font-size: 2.5rem;
  font-weight: bold;
  padding-top: 200px;
}
h3 strong{
  background: linear-gradient(180deg, #fff 0%, #fff 70%, #e2c3c3c2 70%, #e2c3c3c2 100%);
  border-radius: 3px;
}
h4{
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 1.7rem;
  font-weight: 500;
  text-justify: auto;
  margin: 50px auto 20px auto;
}
h4:before, h4:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
h4:before {
  left:0;
}
h4:after {
  right: 0;
}
#cont1, #logo, #cont2, #cont3, #cont4, #cont5, #cont6, #cont7, #cont8, #cont9, #cont10, #cont11{
  margin: auto;

}
.works,.works_sakuracafe,.works_apple{
  margin: 20px auto;
  filter: drop-shadow(2px 2px 2px #cfcdcf);
}
table{
  width: 95%;
  margin: 10px auto 30px auto;
  text-align: left;
  font-size: 1rem;
}
table img{
  width: 8%;
}
td{
  padding: 10px 5px 5px 5px;
  line-height: 1.3rem;
  border-bottom: 1px dotted #e1d2d0;
  word-break: break-all;
  font-weight: lighter;
}
th{
  width: 20%;
  padding: 10px 5px 10px 10px;
  border-bottom: 1px dotted #e1d2d0;
  line-height: 1rem;

}
.point, .point2{
  border-bottom: none;
}

.link{
  color: #293d46;
  font-size: .8rem;
  font-weight: 800;
  display:inline-block;
  position:relative;
  cursor:pointer
}
.link:hover::after{
  width:85%;
  opacity:1
}
.link:hover{
  color: #cfcdcf;
  transition:all .2s ease-in-out
}


.syoten,.flower{
  max-width: 728px;
  width: auto;
  height: auto;
  max-height: auto;
  margin: 50px auto 70px auto;
}
.syoten table, .flower table{
  width: 85%;
}
.syoten table img, .flower table img{
  width: 5%;
}
.syoten th, .flower th{
  width: 15%;
}

.banner_other,#logo{
  max-width: 85%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
}
.banner_other .item,#logo .item{
  width: 85%;
  height: 95%;
  margin: auto;
}
.banner_other .works{
  width: 70%;
}
.banner_other table,#logo table{
  width: 80%;
}
.banner_other table img,#logo table img{
  width: 9.5%;
}
.banner_other th,#logo th{
  width: 25%;
}
.lp{
  padding-top: 5px;
  padding-bottom: 10px;
}

/* logo */
#logo .works{
  width: 45%;
}

/* cont2,cont3 */
#cont2, #cont3{
  max-width: 650px;
}
#cont2 .works{
  width: 70%;
}
#cont2 table img, #cont3 table img, #cont4 table img{
  width: 5%;
}
#cont2 table{
  width: 80%;
}


/* cont4 */
#cont4{
  max-width: 750px;
  width: 95%;
}
.label{
  width: 70%;
}
#cont4 table{
  width: 80%;
}


/* cont5 */
#cont5{
  max-width: 90%;
  height: auto;
}
.flyer1{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
}
.flyer2{
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
}
.flyer1 .works{
  width: 80%;
}
.flyer2 .works{
  width: 90%;
}
#cont5 table{
  width: 60%;
}
#cont5 th{
  width: 15%;
}
#cont5 table img{
  width: 5%;
}

.flyer3{
  width: auto;
  height: auto;
  margin: auto;
}
.flyer3 .works{
  width: 55%;
}
/* cont6, cont7 */

.website1, .lp1, .lp2{
  max-width: 60%;
  height: auto;
  /* max-height: 90vh; */
  display: grid;
  grid-template-columns: 4fr 1fr 1fr;
  margin: auto;
}
.works_sp{
  margin-top: 30px;
}
.qr{
  width: 80%;
  margin: auto;
}
#cont6 table, #cont7 table{
  width: 45%;
  margin-bottom: 20px;
}
#cont6 table img, #cont7 table img{
  width: 5%;
}
.website{
  margin-bottom: 30px;
}
#cont7 .website{
  padding-top: 0;
  padding-bottom: 10px;
}


/* cont8 */
#cont8{
  max-width: 70%;
  height: auto;
  max-height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
}
#cont8 .item{
  width: 100%;
  margin-bottom: 50px;
}
#cont8 .works{
  width: 85%;
}
#cont8 .works_1{
  width: 65%;
}
#cont8 table{
  width: 85%;
}
#cont8 table img{
  width: 8%;
}

/* cont9, cont10, cont11 */
#cont9, .cont10_1{
  max-width: 80%;
  width: auto;
  height: auto;
  max-height: auto;
  margin: auto;
}
#cont9 .works,#cont10 .works{
  width: 50%;
}
.works_sakuracafe{
  width: 100%;
  margin: auto;
}
.works_apple{
  width: 70%;
  margin: auto;
}
#cont9 table{
  width: 50%;
}

#cont10 table{
  width: 45%;
}
#cont9 table img,#cont11 table img{
  width: 6%;
}
#cont10 table img{
  width: 5%;
}
#cont10 .item{
  max-width: 60%;
  height: auto;
  /* max-height: 90vh; */
  display: flex;
  margin: auto;
}
#cont10 .arrow{
  width: 3%;
  margin: auto 30px;
}

/* cont11 */
#cont11{
  max-width: 80%;
  height: auto;
  max-height: auto;
  margin: auto;
}
#cont11 table{
  width: 55%;
  margin-bottom: 150px;
}
#cont11 th{
  width: 20%;
}
#cont11 video{
  width: 80%;
}

/* cont12 */
#cont12{
  max-width: 70%;
  width: auto;
  height: 450px;
  margin: 50px auto;
  background-image: url(images/background.jpg);
  background-position: center;
  background-size: cover;
  background-color: rgba(255, 252, 252, 0.5);
  background-blend-mode: lighten;
  border-radius: 5px;
}

#cont12 p{
  width: 75%;
  font-size: 1.7rem;
  margin: auto ;
  padding-top: 4%;
  line-height: 3.5rem;
  text-shadow: 1px 1px 5px #e1d2d0;
}
#cont12 .cont12_text{
  padding-top: 9%;
}
footer{
  padding: 1px;
}

/* PC表示 */
.pc{
  display: block;
}
.sp{
  display: none;
}

/* スマホ対応 */
@media (max-width:768px){
.pc{
  display: none;
}
.sp{
  display: block;
}

body{
  text-justify: auto;
}
h3{
  width: 90%;
  font-size: 2.2rem;
  font-weight: bold;
  padding-top: 90px;
  margin: auto;
}
h4{
  font-size: 1.5rem;
  margin: 20px auto;
}
.arrow2{
  width: 5%;
  padding-top: 2px;
}

#cont1, #cont2, #cont3, #cont4, #cont5, #cont6, #cont7, #cont8, #cont9, #cont10, #cont11{
  max-width: 95%;
  margin: 20px auto;
}
.syoten table,.flower table,#cont2 table,#cont3 table,
#cont5 table,#cont6 table,#cont6 table, #cont7 table, #cont8 table,#cont9 table, #cont10 table,#cont11 table{
  width: 95%;
  /* font-size: .9rem; */
}
.syoten th,.flower th,#cont2 th,#cont3 th ,#cont4 th,
#cont5 th,#cont6 th, #cont7 th,#cont8 th, #cont9 th, #cont10 th, #cont11 th{
  width: 25%;
}
.syoten table img,.flower table img{
  width: 9%;
}

.banner_other,#logo{
  max-width: 95%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}
.banner_other .item,#logo .item{
  width: 100%;
}
.banner_other table,#logo table{
  width: 100%;
}
.banner_other th,#logo th{
  width: 30%;
}
.banner_other table img,#logo table img,#cont2 table img, #cont3 table img,#cont4 table img,#cont5 table img,#cont6 table img, #cont7 table img,
#cont8 table img,#cont10 table img,#cont11 table img,#cont11 table img{
  width: 10%;
}

#cont2, #cont3,#cont4,#count5{
  width: 95%;
}
#cont2 .works{
  width: 85%;
}

#cont4 table{
  width: 95%;
}

.flyer1,.flyer2{
  width: 95%;
  display: grid;
  grid-template-columns: 1fr;
}
.flyer1 .works,.flyer2 .works{
  width: 90%;
}
.flyer3 .works{
  width: 100%;
}

.website1, .lp1, .lp2{
  max-width: 95%;
}
#cont6 table, #cont7 table{
  width: 98%;
}
.website1 th, .lp1 th, .lp2 th{
  width: 25%;
}

#cont8{
  display: grid;
  grid-template-columns: 1fr;
}

#cont9 .works,#cont10 .works{
  width: 95%;
}
.works_apple{
  width: 100%;
}
#cont9 table img{
  width: 9%;
}
#cont10 table img{
  width: 10%;
}
#cont10 .item{
  max-width: 95%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
#cont10 .arrow{
  width: 10%;
  margin: auto;
}
#cont11 video{
  width: 95%;
}

#cont12{
  max-width: 90%;
  height: 410px;
  margin: 50px auto;
}
#cont12 p{
  width: 85%;
  font-size: 1.3rem;
  padding-top: 15%;
  line-height: 3.2rem;
}

}
/* *{border: 1px solid #000;} */