@charset "UTF-8";

* {scroll-behavior: smooth; box-sizing: border-box;}

body                                   { min-width: 1200px;}
body                                   { color: #454545; background-color: #FFF;}
html                                   { font-size: 16px; line-height: 1.8em; font-family: "Noto Sans JP", serif; font-weight: 300;}
html                                   { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
a                                      { color: #454545;}
html                                   { scroll-padding-top: 100px;}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* font */
.noto-serif-jp                         { font-family: "Noto Serif JP", serif;}
.noto-sans-jp                          { font-family: "Noto Sans JP", serif;}

/* margin */
.mt1                                   { margin-top: 1em;}
.mt2                                   { margin-top: 2em;}
.mt3                                   { margin-top: 3em;}
.mt4                                   { margin-top: 4em;}
.mt5                                   { margin-top: 5em;}


/* common */
.pc                                    { display: block !important;}
.sp                                    { display: none !important;}
b   { display: none;}
.no-text                               { font-size: 0; line-height: 0; text-indent: -9999px;}
.text-center                           { text-align: center;}
.text-right                            { text-align: right;}
.btn_common                            { border: 1px solid #5C8258; background-color: #5C8258; color: #FFF; padding: 0.5em 1em; border-radius: 0.2em; transition: .2s;}
.btn_common a   { color: #FFF;}
.btn_common:hover                      { opacity: .8;}
.btn_common::before                    { content: "›"; color: #ff0; margin-right: 0.5em;}
h3                                     { font-family: "Noto Serif JP", serif; font-size: 2rem; line-height: 1.5em; color: #5C8258; margin-bottom: 1em;}


/* flex */
.flex-container                        { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.flex-item3                            { width: 31%;}
.flex-item4                            { width: 23.5%;}
.flex-item5                            { width: 18%;}
.flex-container img                    { width: 100%; height: auto;}


/* header */
header                                 { min-width: 1200px; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background-color: rgba(255,255,255,.9);}
header .container                      { display: flex; align-items: end; justify-content: space-between; position: relative; width: 100%; padding: 1em 30px;}
header .container ul                   { display: flex; gap: 2em; align-items: center;}
header .container ul li a              { color: #5C8258;}
header .container .btn_mail a          { background-color: #5C8258; color: #FFF; padding: 0.15em 0.5em; border-radius: 0.2em; display: flex; align-items: center;}
header .container #menu                { display: none;}

h1 a                                   { display: block; width: 250px; height: 50px; background: url(./img/logo_aneesfarm_1740509091029.png); background-size: cover;}


/* FV */
#fv                                    { width: 100%; height: 650px; position: relative;}
#fv ul      { width: 100%; height: 650px; position: relative; overflow: hidden;}
#fv li      { overflow: hidden; width: 100%; height: 650px;}
#fv li img  { width: 100%; height: 100%; object-fit: cover;}
#fv h2                                 { background: url(./img/fv-message_1753247109847.png) no-repeat; background-size: contain; width: 200px; height: 336px; font-size: 0; line-height: 0; text-indent: -9999px; position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%,-40%);}



/* コンセプト */
#product                               { max-width: 1200px; margin: auto; padding: 8em 0 0; text-align: center;}
#product h3                            { font-size: 2rem;}
#product h4                            { font-size: 1.2rem; color: #5C8258; margin-bottom: 0.5rem;}
#product li p    { text-align: left;}
#product .flex-container                      { max-width: 1200px; margin: 3rem auto 0;}
#product .flex-container img           { width: 100%; height: auto;}



/* OEM */
#oem                               { max-width: 1200px; margin: auto; padding: 8em 0 0; text-align: center;}
#oem h3                            { font-size: 2rem; color: #454545;}
#oem h3 span                       { font-size: 1.5em; display: block; color: #5C8258; margin-bottom: 1rem;}
#oem h4                            { font-size: 1.3rem; color: #FFF; background-color: #5C8258; margin-bottom: 1.5rem; padding: 1rem;}
#oem h5                            { font-size: 1.1rem; font-weight: bold; color: #5C8258; margin-bottom: 0.5rem; padding: 0 1.5rem; text-align: left;}
#oem li p    { text-align: left;}
#oem .flex-container                      { max-width: 1200px; margin: 3rem auto 0;}
#oem .flex-container .flex-item3   { border: 1px solid #5C8258; border-radius: 0.3rem; padding-bottom: 2rem;}
#oem .flex-container .flex-item3 p             { padding: 0 1.5rem;}
#oem .box                          { background-color: #f2f2f2; padding: 1.5rem; margin-top: 3rem; border-radius: 0.5rem;}
#oem .box h4                       { background-color: transparent; color: #333333; padding: 0; margin-bottom: 1rem;}
#oem .box .flex-container          { margin-top: 0;}
#oem .box .flex-container h5       { padding: 0; border-bottom: 1px solid #5C8258; padding-bottom: 0.3rem; margin-bottom: 0.3rem;}
#oem .btn_common   { max-width: 400px; margin: 2rem auto 0; width: 100%;}


/* wellbeing */
#about                                 { background: url(./img/wellbeing-bg_1753247160386.jpg) center bottom no-repeat; background-size: cover; padding: 3rem 0 15rem; margin-top: 10rem;}
#about div                             { max-width: 1200px; margin: auto; background: url(./img/logo_aneesfarm_1740509091029.png) left top no-repeat; background-size: 250px 50px; padding-top: 80px;}
#about div h3                          { font-size: 2rem; color: #333333;}


#profile                               { max-width: 1000px; margin: 8rem auto;}
#profile h3                            { font-size: 2rem; text-align: center; margin-top: 3rem;}
#profile dl div                        { display: flex; gap: 2rem; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 1rem; margin-top: -1px;}
#profile dl div dt                     { width: 10rem;}
#profile dl div dd                     { flex: 1;}
#profile dl div dd b                   { color: #5C8258;}
#profile dl div dd iframe              { width: 100%; margin-bottom: 2rem; margin-top: 1rem;}


/* お知らせ */
#blog                                  { max-width: 1000px; margin: auto; padding: 4em 0; display: flex; gap: 100px;}
#blog h3                               { width: 10%;}
#blog dl                               { width: 90%;}
#blog dl div                           { display: flex; gap: 2em; padding: 0.5em 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px;}
#blog dl div dt                        { width: 8rem;}
#blog dl div dd                        { flex: 1;}
#blog dl div dd a                      { color: blue;}


#contact                               { max-width: 1000px; margin: 8rem auto;}
#contact h3                            { font-size: 2rem; text-align: center; margin-top: 3rem;}
#contact dl                            { margin-bottom: 1.5rem;}
#contact dl div                        { display: flex; gap: 2rem; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 1rem; margin-top: -1px;}
#contact dl div dt                     { width: 12rem;}
#contact dl div dt span                { font-size: 0.8rem; color: #f00; margin-left: .5rem;}
#contact dl div dd                     { flex: 1;}
#contact dl div dd b                   { color: #5C8258;}
#contact dl div dd input       { width: 30rem; padding: .3rem 1rem; border: 1px solid #ccc; background-color: #ffE;}
#contact dl div dd textarea    { width: 100%; height: 10rem; padding: 1rem; border: 1px solid #ccc; box-sizing: border-box; background-color: #ffE;}
#contact .wpcf7-submit                { background-color: #5C8258; color: #FFF; display: block; margin: auto; padding: .5rem 3rem; border: 0; border-radius: 1.5rem; width: 100%; max-width: 400px;}
#contact .wpcf7-submit:disabled        { opacity: .3;}
#contact .wpcf7-acceptance             { background-color: #fEE; display: block; padding: 1rem; text-align: center;}

.privacy                              { max-width: 100%; padding: 1rem; border: 1px solid #e5e5e5; height: 10rem; overflow-y: scroll; margin-bottom: 1.5rem;}

/* Footer */
footer                                 { background-color: #f2f2f2; padding: 2em 0; margin-top: 5em;}
footer p                               { max-width: 1200px; margin: 2em auto;}


.archive #title,
.single #title                         { height: 20rem; padding-top: 3rem; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5;}
.archive #title h2,
.single #title h2                      { max-width: 1200px; width: 100%; margin: auto; font-size: 4rem; font-family: "Noto Serif JP", serif;}
.archive main,
.single main                           { max-width: 1200px; width: 100%; margin: auto; padding: 5rem 0 8rem;}
.single main h3                        { margin-bottom: 0;}
.single main section p                 { margin: 2rem 0;}
.archive main a,
.single main a                         { color: blue;}

.single main .btn a                    { background-color: #999; color: #fff ; text-align: center; display: block; max-width: 300px; width: 100%; margin: 5rem auto 0; padding: 0.5rem; border-radius: 2rem;}


.archive main dl div                   { display: flex; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px; padding: 1rem 0;}
.archive main dl div dt                { width: 10rem;}
.archive main dl div dd                { flex: 1;}

.post-type-archive-blog main dl > div       { gap: 2rem; position: relative; transition: .2s;}
.post-type-archive-blog main dl > div:hover { opacity: .6;}
.post-type-archive-blog main dl div dt      { width: 300px;}
.post-type-archive-blog main dl div dt img  { width: 100%; height: auto; }
.post-type-archive-blog main dl div dd a    { position: absolute; top: 0; right: 0; bottom: 0; left: 0;}


.single main article ul                 { list-style-position: outside; padding-left: 25px; margin-left:0; margin:1em 0;}
.single main article ul li              { list-style-type:disc; margin-left:0;}
.single main article ol                 { list-style-position: outside; padding-left: 25px; _padding-left: 35px; margin:1em 0;}
.single main article ol li              { list-style-type: decimal; margin-left:0;}
.single main article em                 { font-style:italic;}
.single main article h1                 { font-size: 2em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h2                 { font-size: 1.8em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h3                 { font-size: 1.6em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h4                 { font-size: 1.4em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h5                 { font-size: 1.2em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h6                 { font-size: 1.1em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article blockquote         { background-color: #F2F2F2; padding:12px; border:3px dotted #CCC}

.single main article div.wp-caption            { background-color: #F2F2F2; padding: 9px; border:1px solid #E5E5E5;}
.single main article div.wp-caption.alignright { margin-left: 10px;}
.single main article div.wp-caption.alignleft  { margin-right: 10px;}
.single main article div.wp-caption img a      { display:block; background-color:#0CF}




@media screen and ( max-width: 767px) {



    html                                   { font-size: 3.5vw; min-width: auto; color: #121212;}
    body                                   { min-width: auto;}
    /* common */
    .pc                                    { display: none !important;}
    .sp                                    { display: block !important;}
    b     { display: inline-block; font-weight: 300 ;}

    h3                                     { font-family: "Noto Serif JP", serif; font-size: 1.5em; line-height: 1.5em; color: #5C8258; margin-bottom: 1em;}

    /* flex */
    .flex-container                { margin: 2rem 0 0; gap: 2rem 0;}
    .flex-item4                    { width: 48%;}

    /* header */
    header .container                      { display: flex; align-items: end; justify-content: space-between; position: relative; width: 100vw; padding: 1em 5vw;}
    header nav                             { position: fixed; top: calc( 35px + 2rem); left: 0; right: 0; background-color: rgba(255,255,255,.95); overflow: hidden; height: 0; transition: .5s;}
    header nav.on                          { height: calc(100vh - ( 35px + 2rem));}
    header nav ul                          { flex-direction: column; gap: 1rem !important; padding: 2rem 0;}
    header nav ul li                       { width: 90vw;}
    header nav ul li a                     { border-top: 1px solid #e5e5e5; padding-top: 1rem; display: block; margin: auto;}
    header nav ul li a::before             { content: "›"; margin: 0 0.5rem; color: #f00;}
    header nav ul li:last-of-type a        { border-top: 0;}
    header nav ul li:last-of-type  a::before  { color: #FF0; padding: 0.5rem;}

    header .container #menu                { position: fixed; top: 0rem; right: 0; width: 35px; height: 35px; display: block; display: flex; align-items: center; position: relative;}
    header .container #menu span           { display: block; width: 100%; height: 2px; background-color: #5C8258; margin-top: -1px; transition: .5s;}
    header .container #menu span::before   { content: ""; display: block; width: 100%; height: 2px; background-color: #5C8258; position: absolute; top: 6px; transition: .5s;}
    header .container #menu span::after    { content: ""; display: block; width: 100%; height: 2px; background-color: #5C8258; position: absolute; bottom: 7px; transition: .5s;}
    header .container #menu.on span        { background-color: rgba(255,255,255,0);}
    header .container #menu.on span::before { transform: rotate(20deg); top: 17px;}
    header .container #menu.on span::after  { transform: rotate(-20deg); bottom: 16px;}

    h1 a                                   { display: block; width: 170px; height: 35px; background: url(./img/logo_aneesfarm_1740509091029.png) no-repeat; background-size: contain;}


    /* FV */
    #fv                                    { width: 100vw; height: 120vw; }
    #fv ul      { width: 100vw; height: 120vw; position: relative; overflow: hidden;}
    #fv li      { overflow: hidden; width: 100%; height: 120vw;}
    #fv h2                                 { width: 30vw; height: 50vw;}



    /* コンセプト */
    #product                               { max-width: 90vw; margin: auto; padding: 4em 0; text-align: left;}
    #product h3                            { font-size: 1.6rem; letter-spacing: -0.05rem; text-align: center;}
    #product h4                            { font-size: 1rem; text-align: center;}

/* OEM */
#oem                                { max-width: 90vw; margin: auto; padding: 4em 0; text-align: left;}
#oem h3                            { font-size: 1.3rem; }
#oem h3 span                       { font-size: 1.5em;}
#oem h4                            { font-size: 1.2rem; color: #FFF; background-color: #5C8258; margin-bottom: 1.5rem; padding: 1rem;}
#oem h5                            { font-size: 1.1rem; font-weight: bold; color: #5C8258; margin-bottom: 0.5rem; padding: 0 1.5rem; text-align: left;}

#oem .flex-container                      {  flex-direction: column;}
#oem .flex-container .flex-item3   { width: 100%;}
#oem .box h4                       { background-color: transparent; color: #333333; padding: 0; margin-bottom: 1rem; font-size: 1.5rem; text-align: center;}
#oem .box .flex-container          { margin-top: 0; flex-direction: row;}
/* #oem .box .flex-container h5       { padding: 0; border-bottom: 1px solid #5C8258; padding-bottom: 0.3rem; margin-bottom: 0.3rem;}
/* #oem .btn_common   { max-width: 400px; margin: 2rem auto 0; width: 100%;} */
#oem .box .flex-item5   { width: 48%;}



    /* wellbeing */
    #about                                 { background: url(./img/wellbeing-bg_1753247160386.jpg) 82% bottom no-repeat; background-size: cover; padding: 3rem 0 15rem; margin-top: 0;}
    #about div                             { max-width: 90vw; margin: auto; background: url(./img/logo_aneesfarm_1740509091029.png) left top no-repeat; background-size: 150px auto; padding-top: 50px;}
    #about div h3                          { font-size: 1.5rem;}

    #profile                               { max-width: 90vw; margin: 5rem auto;}
    #profile h3             { font-size: 1.5rem; margin-top: 3rem;}
    #profile dl div         { flex-direction: column; gap: 0; padding: 1rem 0;}
    #profile dl div dt      { width: auto; font-weight: bold; color: #5C8258;}

    
/* お知らせ */
#blog                                  { max-width: 90vw; margin: auto; padding:0; gap: 0; flex-direction: column;}
#blog h3                               { width: auto; text-align: center;}
#blog dl                               { width: auto;}
#blog dl div                           { display: flex; flex-direction: column; gap: 0; }
#blog dl div dt                        { width: auto;}
#blog dl div dd                        { width: auto; flex: 1;}


#contact                               { max-width: 90vw; margin: 4rem auto;}
/* #contact h3                            { font-size: 2rem; text-align: center; margin-top: 3rem;} */
/* #contact dl                            { margin-bottom: 1.5rem;} */
#contact dl div                        { display: flex; gap: 0; padding: 1rem 0; flex-direction: column;}
#contact dl div dt                     { width: auto; font-weight: bold; color: #5C8258;}
#contact dl div dd                     { flex: 1;}
#contact dl div dd b                   { color: #5C8258;}
#contact dl div dd input       { width: 100%; }
#contact dl div dd textarea    { box-sizing: border-box;}
#contact button                { background-color: #5C8258; color: #FFF; display: block; margin: auto; padding: .5rem 3rem; border: 0; border-radius: 1.5rem; width: 100%; max-width: 400px;}


/* Footer */
footer                                 { background-color: #f2f2f2; padding: 2em 0; margin-top: 5em;}
footer p                               { max-width: 90vw; margin: 2em auto;}




.archive #title,
.single #title                         { height: 15rem; padding-top: 3rem; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5;}
.archive #title h2,
.single #title h2                      { margin: 0 3vw; font-size: 2.5rem; }
.archive main,
.single main                           { padding: 3rem 3vw 5rem; white-space: wrap;}


.archive main dl div                   { display: flex; flex-direction: column; }
.archive main dl div dt                { width: auto;}

.post-type-archive-blog main dl > div       { gap: 2rem; position: relative; transition: .2s;}
.post-type-archive-blog main dl div dt      { width: auto;}


.single main article ul                 { list-style-position: outside; padding-left: 25px; margin-left:0; margin:1em 0;}
.single main article ul li              { list-style-type:disc; margin-left:0;}
.single main article ol                 { list-style-position: outside; padding-left: 25px; _padding-left: 35px; margin:1em 0;}
.single main article ol li              { list-style-type: decimal; margin-left:0;}
.single main article em                 { font-style:italic;}
.single main article h1                 { font-size: 2em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h2                 { font-size: 1.8em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h3                 { font-size: 1.6em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h4                 { font-size: 1.4em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h5                 { font-size: 1.2em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article h6                 { font-size: 1.1em; font-weight:bold; line-height: 2em;  font-family: "Noto Serif JP", serif; color: #333333;}
.single main article blockquote         { background-color: #F2F2F2; padding:12px; border:3px dotted #CCC}

.single main article div.wp-caption            { background-color: #F2F2F2; padding: 9px; border:1px solid #E5E5E5;}
.single main article div.wp-caption.alignright { margin-left: 10px;}
.single main article div.wp-caption.alignleft  { margin-right: 10px;}
.single main article div.wp-caption img a      { display:block; background-color:#0CF}



}