@charset "UTF-8";
/*　変数　*/
:root{
/*色*/
--font: #555555;
--blue: #58A9EF;
--gray: #00000029;
--white: #ffffff;
/*左右の余白*/
--side: 183px;
}
/*サイズの基準：1rem = 100px*/
:root {
    font-size: 100px;
}
body {
    color: var( --font);
    font-size: 0.16rem;
    font-family: sans-serif;
    line-height: 1.5;
    background-color: var( --white);
}
body, h1, h2, h3, h4, h5, h6, p, ul, figure {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a {
    text-decoration: none;
}
a:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
    color: #0000ee;
}

li {
    list-style: none;
}

@media (max-width: 640px){
  body {
    font-size: 0.12rem;
  }
}

/*ここからスタート*/
/*ヘッダー*/
.header {
    text-align: center;
    margin-top: 100px;
}

  
/*余白*/
.wrap {
    width: 88%;
    margin: 0 auto;
}

.main-wrap {
    display: flex;
    align-items: center;
    padding: 48px 0;
}

@media (max-width: 1024px){
    .main-wrap {
    flex-wrap: wrap;
    justify-content: center;
    padding: 24px 0;
}
}

.main-img {
    margin-right: 24px;
}

.main-detail {
    width: 84%;
    letter-spacing: 1.4px;
}

@media (max-width: 1024px){
    .main-detail {
    width: 100%;
    letter-spacing: 1.4px;
}
}

.main-content {
    width: 64%;
    margin: 0 auto;
    padding-top: 48px;
}

@media (max-width: 1024px){
    .main-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}
}

.content-wrap {
    display: flex;
    margin-top: 64px;
}

.content-img{
    width: 30%;
    margin-right: 48px;
}

@media (max-width: 1024px){
.content-img{
    width: 30%;
    margin-right: 20px;
}
}

.content-left {
    width: 65%;
}

.content-detail {
    margin-top: 24px;
}

.one {
    color: red;
}

.three {
    color: green;
}

.four {
    color: rgb(197,14,40);
}

.five {
    color:rgb(239, 62, 44);
}

.seven {
    color:rgb(250,189,0);
}

.eight {
    color:rgb(151,10,49);
}

.nine {
    color:rgb(254,105,37);
}

.ten {
    color:rgb(220,9,122);
}

.twelve {
    color: rgb(193,140,48);
}

.thirteen {
    color:rgb(62,125,72);
}



/*フェードイン*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
opacity: 0;
  transform: translateY(200px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}



/*フッター*/

ul.footer-nav {
    overflow: hidden;
    list-style: none;
    font-size: 10px;
    width: 500px;
    margin: auto;
}

@media (max-width: 640px){
ul.footer-nav {
    width: 100%;
}
}

ul.footer-nav li {
    box-sizing: border-box;
    border-right: 1px solid #333;
    width: 33%;
    float: left;
    text-align: center;
}

.copy {
    text-align: center;
    font-size: 11px;
    font-family: 'Century Gothic',sans-serif;
    font-weight: 700;
    margin: 32px auto 0;
}

.footer {
    margin:80px 0;
}


.footer-link {
    font-size: 0.16rem;
}

@media (max-width: 1024px){
    .delivery_map {
    flex-wrap: wrap;
   }
}

@media (max-width: 414px){
   .footer-link {
    font-size: inherit;
   }
}