/*
Author: matsumura
*/

@charset "UTF-8";

/*===============================

	共通・全体

================================*/

html {
    /* ルートのフォントサイズ設定(Aiデータ幅が大きいので小さめに)
     10pxに合わせる場合⇒62.5%
     Aiデータ幅(750px)を64%(480px)に変換して計算
     64%*62.5%(10px)                                   */
    
	font-size: 40%;
}

body {
    overflow-x: hidden;
    /* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */
	font-size: 1.6em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
img {
    max-width: 100%;
}

::selection {
    background: rgba(216, 12, 24, 0.4);
}
::placeholder {
  color: #e8e8e8;
}

img.pc {
    display: none;
}


/*===============================

	ローディング画面

================================*/

.js-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    background: #fbedd6;
    background-image: url(../images/logo.png);
    background-size: 330px auto;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity .8s, visibility .8s;
    z-index: 10000;
}
.is-loaded .js-loader {
    visibility: hidden;
    opacity: 0;
}
.js-loader-progress {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 5px;
}
.is-loaded .js-loader-progress {
    visibility: hidden;
    opacity: 0;
}
.js-loader-progress-bar {
    background: #cc0011;
    height: 100%;
    width: 0;
    transition: width .4s;
}


/*===============================

	フェードインアニメーション

================================*/

/*
	ローディング完了後に実行する
================================*/
.fadeIn_fromRight.start {
    transform: translate3d(30px, 0, 0);
    opacity: 0;
    animation: fadeIn_fromRight 1.5s ease forwards;
}
@keyframes fadeIn_fromRight {
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/*
	スクロール時に実行する
================================*/
.fadeIn {
    transform: translate3d(0, 30px, 0);
    transition: 1.5s;
    opacity: 0;
}
.fadeIn.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}


/*===============================

	ヘッダー

================================*/
header {
    text-align: center;
}
header nav {
    text-align: left;
}
body.subpage header {
    position: relative;
    height: 172px;
}
header div.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
header p.h1_sub {
    margin-bottom: 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #d80c18;   
}
header h1 {
    display: inline-block;
    padding: 0 22px;
    font-size: 4.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.8;
    background-color: #fbedd6;
    border-radius: 6px;
}
header img.bg_left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
header img.bg_right {
    position: absolute;
    right: 0;
    bottom: -34px;
    z-index: 1;
}

/*
    ハンバーガーメニュー
================================*/
#nav-open {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;/*最前面*/
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #d80c18;
    cursor: pointer;
}
#nav-open.fixed {
    position: fixed;
}
/*ハンバーガーアイコン*/
#nav-open span {
    position: absolute;
    width: 31px;
    height: 39px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../images/menu_opn.png);
    background-size: 100%;
}
/*中身*/
#nav-content {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
}
#nav-content.open {
    display: block;
    opacity: 1;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/menu_bg02.png), url(../images/menu_bg01.png);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, top center;
    background-size: 100% auto, cover;
}
/*開いたときのアイコン*/
#nav-open.active {
    position: fixed;
}
#nav-open.active span {
    position: absolute;
    background-image: url(../images/menu_close.png);
}
nav ul {
    margin-top: 70px;
    margin-left: 17.3%;
    font-size: 3.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
nav li:not(:last-child){
    margin-bottom: 58px;
}

/*===============================

	トップページ（index.html）

================================*/
#main_top section p {
    margin-bottom: 35px;
    font-size: 2.8rem;
    line-height: 1.77;
    letter-spacing: 0.04em;
}
h2 {
    margin-bottom: 27px;
    font-size: 4.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #67241d;
}
#main_top section p.h2_sub {
    margin-bottom: 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #d80c18;
}

/*
	スライドショー
================================*/
div.mv_area {
    position: relative;
}
div.mv_area img.nav_bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 42.1%;
}
div.mv_area a {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8.9%;
}
div.mv_area div.slide_text {
    position: absolute;
    bottom: 9.9%;
    right: 5.4%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
div.mv_area div.slide_text p {
    display: inline-block;
    padding: 0 22px;
    border-radius: 6px;
    background-color: #fbedd6;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.68;
    letter-spacing: 0.01em;
    font-feature-settings: "palt";
}
div.mv_area div.slide_text p:not(:last-child) {
    margin-bottom: 18px;
}
div.slide {
    position: relative;
    width: 100%;
    padding-top: 177.87%;
}
div.slide div.slide_img {
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    animation: slideshow 20s linear infinite;
}
div.slide div.slide_img img {
    width: 100%;
}
@keyframes slideshow {
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    20%{
        opacity: 1
    }
    30%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
div.slide div:nth-child(2){
    animation-delay: 5s;
}
div.slide div:nth-child(3){
    animation-delay: 10s;
}
div.slide div:nth-child(4){
    animation-delay: 15s;
}

/*
	高橋農場での1日
================================*/
#oneday_section {
    position: relative;
    padding-top: 83px;
    padding-bottom: 111px;
    background-color: #fbedd6;
}
#oneday_section p.h2_sub {
    margin-left: 5.6%;
}
#oneday_section a {
    float: right;
    padding: 0 26px 10px 21px;
    border-bottom: 1px solid #67241d;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #67241d;
}
#oneday_section a:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 4px;
    bottom: 0;
    border-right: 1px solid #67241d;
    transform: skew(45deg);
}
div.oneday_item.photo {
    width: 82.7%;
}
div.oneday_item.photo img {
    border-radius: 0 6px 6px 0;
}
div.oneday_item.text {
    position: relative;
    width: 78.5%;
    height: 333px;
    margin-right: 0;
    margin-top: -32px;
    margin-left: auto;
    border-radius: 6px 0 0 6px;
    background-color: #fff;
}
div.oneday_item.text div {
    position: absolute;
    width: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.oneday_wrapper > img {
    position: absolute;
    width: 27%;
    bottom: 26px;
    left: 2.5%;
}

/*
	スタッフ募集中！
================================*/
div.bg_wrapper {
    background-color: #fbedd6;
    background-image: url(../images/top/bg_sp.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#staff_section {
    position: relative;
    text-align: center;
}
#staff_section p.h2_sub {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
}
#staff_section div {
    position: relative;
    margin-bottom: 86px;
}
#staff_section img.staff_text {
    position: absolute;
    width: 51.2%;
    max-width: 330px;
    bottom: -70px;
    left: 5.5%
}
#staff_section a {
    position: relative;
    display: inline-block;
    width: 326px;
    background-color: #d80c18;
    border-radius: 32px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 65px;
    letter-spacing: 0.05em;
    color: #fff;
}
#staff_section a:after {
    content: "";
    position: absolute;
    width: 20.25%;
    height: 10.77%;
    top: 41%;
    right:14.1%;
    border-right: 1px solid #ffa7a7;
    border-bottom: 1px solid #ffa7a7;
    transform: skew(45deg);
}

/*
	鶴居村での暮らし
================================*/
#tsurui_section {
    padding-top: 123px;
    padding-bottom: 142px;
}
#tsurui_section p.h2_sub {
    margin-right: 5.6%;
    text-align: right;
}
#tsurui_section a {
    float: right;
    padding: 0 26px 10px 21px;
    border-bottom: 1px solid #67241d;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #67241d;
}
#tsurui_section a:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 4px;
    bottom: 0;
    border-right: 1px solid #67241d;
    transform: skew(45deg);
}
div.tsurui_item.photo {
    width: 83.2%;
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}
div.tsurui_item.photo img {
    border-radius: 6px 0 0 6px;
}
div.tsurui_item.text {
    position: relative;
    width: 78.3%;
    height: 370px;
    margin-top: -32px;
    border-radius: 0 6px 6px 0;
    background-color: #fff;
}
div.tsurui_item.text div {
    position: absolute;
    width: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*===============================

	高橋農場での1日（oneday.html）

================================*/
#main_oneday h3 {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    height: 52px;
    margin-bottom: 6px;
    font-size: 4.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #67241d;
    font-feature-settings: "palt";
}
#main_oneday h3 img {
    margin-right: 18px;
}
#main_oneday h3 span {
    position: absolute;
    top: 33px;
    left: 74px;
    font-size: 2.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}
#main_oneday p {
    text-align: justify;
    font-size: 2.8rem;
    line-height: 1.77;
    letter-spacing: 0.04em;
}

/*
	朝のお仕事
================================*/
#early_section {
    padding-top: 40px;
    padding-bottom: 78px;
    background-color: #fbedd6;
}
#early_section h2 {
    width: 36.5%;
    min-width: 219px;
    margin-left: 7.66%;
}
div.early_item:not(:last-child) {
    margin-bottom: 54px;
}
div.early_item:nth-child(1) {
    position: relative;
}
div.early_item:nth-child(1) div.photo {
    width: 82.6%;
    max-width: 500px;
}
div.early_item:nth-child(1) div.photo img {
    border-radius: 0 10px 10px 0;    
}
div.early_item:nth-child(1) div.text {
    position: relative;
    width: 78.3%;
    margin-left: auto;
    margin-right: 0;
    margin-top: -54px;
    padding: 8% 10%;
    border-radius: 10px 0 0 10px;    
    background-color: #fff;
}
div.early_item:nth-child(1) > img {
    position: absolute;
    width: 26.9%;
    left: 1.3%;
    bottom: -20px;
}
div.early_item:nth-child(2), div.early_item:nth-child(3) {
    display: flex;
    flex-direction: column-reverse;
    width: 84%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
div.early_item:nth-child(2) p, div.early_item:nth-child(3) p {
    margin-bottom: 24px;
}
div.early_item:nth-child(2) div.photo img, div.early_item:nth-child(3) div.photo img {
    border-radius: 10px;    
}

/*
	午前中のお仕事
================================*/
#morning_section {
    padding-top: 36px;
    padding-bottom: 76px;
}
#morning_section h2 {
    width: 42.9%;
    min-width: 258px;
    margin-left: 7.9%;
}
div.morning_item:nth-child(1) {
    margin-bottom: 30px;
}
div.morning_item:nth-child(1) div.photo {
    width: 82.7%;
    max-width: 500px;
    margin-right: 0;
    margin-left: auto;
}
div.morning_item:nth-child(1) div.photo img {
    border-radius: 10px 0 0 10px;
}
div.morning_item:nth-child(1) div.text {
    position: relative;
    width: 78.5%;
    min-width: 370px;
    margin-top: -51px;
    padding: 8% 10%;
    border-radius: 0 10px 10px 0;
    background-color: #fff;
}
div.morning_item:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
    width: 84%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}
div.morning_item:nth-child(2) p {
    margin-bottom: 24px;
}
div.morning_item:nth-child(2) div.photo img {
    border-radius: 10px;    
}
div.morning_item:nth-child(3) {
    width: 84%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;   
}
div.morning_item:nth-child(3) div:not(:last-child) {
     margin-bottom: 50px;   
}

/*
	午後のお仕事
================================*/
#afternoon_section {
    padding-top: 47px;
    padding-bottom: 104px;
    background-color: #fbedd6;
    background-image: url(../images/oneday/afternoon_bg_bottom.png), url(../images/oneday/afternoon_bg.png);
    background-size: 41.3%, auto, 100% auto;
    background-position: bottom center, top 40% center;
    background-repeat: no-repeat, no-repeat;
}
#afternoon_section h2 {
    width: 41.5%;
    min-width: 249px;
    margin-left: 6.36%;
}
div.afternoon_item:not(:last-child) {
    margin-bottom: 54px;
}
div.afternoon_item:nth-child(1) div.photo {
    width: 82.6%;
    max-width: 500px;
}
div.afternoon_item:nth-child(1) div.photo img {
    border-radius: 0 10px 10px 0;    
}
div.afternoon_item:nth-child(1) div.text {
    position: relative;
    width: 78.7%;
    min-width: 400px;
    margin-left: auto;
    margin-right: 0;
    margin-top: -54px;
    padding: 8% 10%;
    border-radius: 10px 0 0 10px;    
    background-color: #fff;
}
div.afternoon_item:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
    width: 84%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
div.afternoon_item:nth-child(2) p {
    margin-bottom: 24px;
}
div.afternoon_item:nth-child(2) div.photo img {
    border-radius: 10px;    
}
div.afternoon_item:nth-child(3) {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 84%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
div.afternoon_item:nth-child(3) h3 {
    width: 100%;
}
div.afternoon_item:nth-child(3) div.text {
    width: 52.6%;
}
div.afternoon_item:nth-child(3) div.photo {
    width: 35.6%;
}

/*
	働くスタッフの声
================================*/
#voice_section {
    margin-top: -17px;
    padding-bottom: 28px;
}
#voice_section h2 {
    text-align: center;
}
#voice_section h2 img {
    width: 33.3%;
    min-width: 200px;
}
#voice_section > div {
    position: relative;
    width: 84%;
    margin: 2% auto;
}
#voice_section > div img.photo {
    border-radius: 10px;
}
#voice_section > div img.name {
    position: absolute;
    width: 51.9%;
    right: 0.5%;
    bottom: -21%;
    max-width: 300px;
}
#voice_section dl {
    width: 84%;
    min-width: 425px;
    margin: 0 auto;
    font-size: 2.8rem;
    line-height: 1.77;
    letter-spacing: 0.04em;
}
#voice_section dt {
    height: 55px;
    margin-top: 45px;
    margin-bottom: 8px;
    padding-left: 71px;
    background-image: url(../images/oneday/voice_Q.png);
    background-position: left;
    background-repeat: no-repeat;
    line-height: 27px;
    display: inline-flex;
    align-items: center;
} 
#voice_section dd {
    text-align: justify;
}


/*===============================

	スタッフ募集（staff.html）

================================*/

/*
	高橋農場からのメッセージ
================================*/
#message_section {
    padding-top: 34px;
    padding-bottom: 140px;
    background-color: #fbedd6;
    background-image: url(../images/footprints.png);
    background-size: 129px auto;
    background-position: left 18% bottom -8%;
    background-repeat: no-repeat;
}
#message_section div {
    position: relative;
    width: 84%;
    max-width: 630px;
    margin-bottom: 12vw;
    margin-left: auto;
    margin-right: auto;
}
#message_section div > img {
    border-radius: 10px;
}
#message_section h2 {
    position: absolute;
    width: 63.97%;
    max-width: 403px;
    right: -6%;
    bottom: -30%;
}
#message_section p {
    width: 78%;
    max-width: 635px;
    margin: 0 auto;
    text-align: justify;
    font-size: 2.8rem;
    line-height: 2.06;
    letter-spacing: 0.04em;
}

/*
	YouTube
================================*/
#youtube_section > div {
    position: relative;
    padding-top: 56.25%;
}
#youtube_section > div iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

/*
	募集要項
================================*/
#job_section {
    padding-top: 59px;
    padding-bottom: 26px;
}
#job_section h2 {
    text-align: center;
    font-size: 4.2rem;
    letter-spacing: 0.09em;
}
#job_section h3 {
    margin-bottom: 15px;
    padding-left: 8px;
    border-left: 7px solid #d80c18;
    font-size: 3.0rem;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.04em;
}
#job_section div.job_area {
    width: 83.5%;
    margin: 0 auto;
}
#job_section div.job_area:not(:last-child) {
    margin-bottom: 70px;
}
#job_section dl {
    font-size: 2.5rem;
    letter-spacing: 0.04em;
}
#job_section dt {
    margin-bottom: 10px;
    padding-left: 2.8%;
    background-color: #fbedd6;
    line-height: 35px;
}
#job_section dd {
    padding-left: 2.8%;
    line-height: 1.52;
}
#job_section dd:not(:last-child) {
    margin-bottom: 22px;
}
#job_section li {
    position: relative;
    margin-left: 0.6em;
}
#job_section li:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 0.6em;
    left: -0.6em;
    border-radius: 50%;
    background-color: #d80c18;
}


/*===============================

	鶴居村での暮らし（tsurui.html）

================================*/
#main_tsurui p {
    text-align: justify;
    font-size: 2.7rem;
    line-height: 2.06;
    letter-spacing: 0.04em;  
}
#main_tsurui h4, #main_tsurui dl {
    font-size: 2.7rem;
    letter-spacing: 0.04em;  
}

/*
	鶴居村ってどこ？
================================*/
#location_section {
    padding-top: 37px;
    padding-bottom: 50px;
    background-color: #fbedd6;
}
#location_section h2 {
    width: 73.5%;
    max-width: 441px;
    margin: 0 auto;
    margin-bottom: 10px;
}
#location_section p {
    width: 78.4%;
    margin: 0 auto;
}

/*
	気候風土・移住支援
================================*/
#features_section {
    position: relative;
    padding-top: 78px;
    padding-bottom: 98px;
}
#features_section p {
    width: 85.3%;
    max-width: 500px;
    margin: 0 auto;
}
#features_section > img {
    position: absolute;
    width: 41.3%;
    max-width: 248px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
div.climate_area {
    margin-bottom: 36px;
}
div.climate_area div {
    position: relative;
    width: 84.1%;
    max-width: 505px;
    margin: 0 auto;
    margin-bottom: 20px
}
div.climate_area h3 {
    position: absolute;
    width: 48.5%;
    max-width: 306px;
    top: -16%;
    left: -6%;
}
div.support_title {
    display: flex;
    justify-content: space-between;
    width: 93%;
    max-width: 560px;
    margin: 0 auto;
    margin-bottom: 10px;
}
div.support_title h3 {
    width: 40.9%;
}
div.support_title div {
    width: 27.5%;
    margin-right: 3%;
}
div.tsurui_contact {
    width: 84.4%;
    max-width: 420px;
    margin: 0 auto;
    margin-top: 25px;
    padding: 22px 26px;
    border: 1px solid #d5d5d5;
    border-radius: 7px;
}
div.tsurui_contact h4 {
    font-weight: 700;
    margin-bottom: 14px;
}
div.tsurui_contact dl {
    line-height: 1.63;
} 
div.tsurui_contact dt {
    font-weight: 400;
}

/*
	鶴居村には他にはない施策がたくさん！
================================*/
#policy_section {
    position: relative;
    padding-top: 176px;
    padding-bottom: 21px;
    background-color: #fbedd6;
    text-align: center;
}
#policy_section h2 {
    position: absolute;
    width: 76%;
    max-width: 400px;
    top: -1.2%;
    left: 50%;
    transform: translateX(-50%);
}
#policy_section ul {
    min-width: 404px;
    width: 84%;
    max-width: 460px;
    margin: 0 auto;
    margin-bottom: 21px;
    text-align: left;
    font-size: 2.5rem;
    line-height: 1.36;
    letter-spacing: 0.04em;
}
#policy_section li:not(:last-child) {
    display: flex;
    align-items: center;
    height: 58px;
    margin-bottom: 10px;
    padding: 0 6%;
    background-color: #fff;
    border-radius: 7px;
    font-feature-settings: "palt";
}
#policy_section li:last-child {
    text-align: right;
}
#policy_section a {
    position: relative;
    display: inline-block;
    width: 362px;
    padding-left: 50px;
    background-color: #d80c18;
    border-radius: 32px;
    text-align: left;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 65px;
    letter-spacing: 0.05em;
    color: #fff;    
}
#policy_section a:after {
    content: "";
    position: absolute;
    width: 9.7%;
    height: 10.77%;
    top: 41%;
    right: 10%;
    border-right: 1px solid #ffa7a7;
    border-bottom: 1px solid #ffa7a7;
    transform: skew(45deg);
}


/*===============================

	会社概要（company.html）

================================*/
#main_company {
    padding-top: 34px;
}
#main_company p {
    width: 78%;
    max-width: 585px;
    margin: 0 auto;
    text-align: justify;
    font-size: 2.8rem;
    line-height: 2.06;
    letter-spacing: 0.04em;
}
#main_company p:not(:last-of-type) {
    margin-bottom: 38px;
}

/*
	高橋農場のはじまり・歴史
================================*/
#main_company div.title_area {
    position: relative;
    width: 84%;
    max-width: 630px;
    margin: 0 auto;
    margin-bottom: 75px;
}
#main_company div.title_area img {
    border-radius: 10px;
}
#main_company div.title_area h2 {
    position: absolute;
    width: 61.3%;
    max-width: 386px;
    right: -9%;
    bottom: -32%;
}

/*
	親父が兄弟三人で始めた酪農。
================================*/
#history01_section {
    position: relative;
    padding-bottom: 77px;
}
#history01_section h3 {
    width: 76.1%;
    max-width: 571px;
    margin: 0 auto;
    margin-bottom: 33px;
}
#history01_section > img {
    position: absolute;
    width: 41.3%;
    max-width: 248px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/*
	あの時から今まで、ずっと酪農一筋。
================================*/
#history02_section {
    position: relative;
    background-color: #fbedd6;
    padding-top: 36vw;
    padding-bottom: 100px;
}
#history02_section h3 {
    position: absolute;
    width: 46.3%;
    max-width: 347px;
    top: -1.5%;
    left: 51%;
    transform: translateX(-50%);
}
#history02_section > div {
    margin-bottom: 38px;
}
#history02_section div div {
    width: 84%;
    max-width: 630px;
    margin: 0 auto;
    margin-bottom: 28px;
}
#history02_section div img {
    border-radius: 10px;
}

/*
	会社概要
================================*/
#profile_section {
    padding-top: 56px;
    padding-bottom: 16px;
}
#profile_section h2 {
    margin-bottom: 33px;
    font-size: 4.2rem;
    letter-spacing: 0.09em;
    text-align: center;
}
#profile_section dl {
    display: flex;
    flex-wrap: wrap;
    width: 83.8%;
    max-width: 600px;
    min-width: 430px;
    margin: 0 auto;
    font-size: 2.5rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
}
#profile_section dt {
    display: inline-flex;
    align-items: center;
    width: 27.9%;
    border-top: 1px solid #d80c18;
}
#profile_section dt:last-of-type {
    border-bottom: 1px solid #d80c18;
}
#profile_section dd {
    width: 72.1%;
    padding: 16px 0;
    padding-left: 23px;
    border-top: 1px solid #d5d5d5;
}
#profile_section dd:last-of-type {
    border-bottom: 1px solid #d5d5d5;
}
#profile_section dd img {
    height: 1.2em;
    padding: 1px;
    padding-bottom: 4px;
}

/*===============================

	お問い合わせ（contact.html）

================================*/
#main_contact {
    position: relative;
    padding-top: 73px;
    padding-bottom: 68px;
    text-align: center;
    background-color: #fbedd6;
}
#main_contact form {
    width: 87%;
    max-width: 580px;
    margin: 0 auto;    
}
#main_contact dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 13px;
    letter-spacing: 0.04em;
    text-align: left;
}
#main_contact dt {
    display: inline-flex;
    align-items: center;
    font-size: 2.3rem;
}
#main_contact dt:not(:last-of-type) {
    width: 21%;
    height: 41px;
    margin-bottom: 28px;
}
#main_contact dt:last-of-type {
    width: 100%;
    margin-bottom: 17px;
    margin-top: 12px;
}
#main_contact dt span {
    color: #ff0000;
}
#main_contact dd {
    display: inline-flex;
    font-size: 2.6rem;
}
#main_contact dd:not(:last-of-type) {
    width: 79%;
    height: 41px;
}
#main_contact dd:last-of-type {
    width: 100%;
}
#main_contact input[type="text"],
#main_contact input[type="tel"],
#main_contact input[type="email"],
#main_contact textarea {
    width: 100%;
    padding: 0 18px;
    background-color: #fff;
    border-radius: 7px;
    line-height: 1;
}
#main_contact textarea {
    padding: 18px;
    line-height: 1.5;
}
#main_contact form p {
    margin-bottom: 57px;
    text-align: right;
    font-size: 1.9rem;
    letter-spacing: 0.04em;
}
#main_contact form p span {
    font-weight: 700;
    color: #ff0000;
} 
#main_contact div.btn_wrap {
    position: relative;
    display: inline-block;
    width: 326px;
    background-color: #d80c18;
    border-radius: 33px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 65px;
    letter-spacing: 0.05em;
    color: #fff;
}
#main_contact div.btn_wrap:after {
    content: "";
    position: absolute;
    width: 10.74%;
    height: 10.77%;
    top: 41%;
    right: 12%;
    border-right: 1px solid #ffa7a7;
    border-bottom: 1px solid #ffa7a7;
    transform: skew(45deg);
}
#main_contact > img {
    position: absolute;
    width: 26.9%;
    left: 7%;
    bottom: -23vw;
}

/*
    確認画面（contact.php）
================================*/
#formWrap, div.contactphp_inner {
    padding: 70px 0;
    font-size: 2.6rem;
}
body.contactphp table {
/*    table-layout: fixed;*/
    width: 90%;
    max-width: 700px;
    margin: 40px auto;
    font-size: 2.4rem;
    border: 1px solid #d5d5d5;
/*    border-radius: 10px;*/
}
body.contactphp table th {
    width: 24%;
    padding: 10px;
    background-color: #d5d5d5;
/*    border-right: 1px solid #d5d5d5;*/
}
body.contactphp table td {
    width: 76%;
    padding: 10px;
}
body.contactphp table tr:not(:last-child) th {
    border-bottom: 1px solid #fff;    
}
body.contactphp table tr:not(:last-child) td {
    border-bottom: 1px solid #d5d5d5;
}
body.contactphp input[type="submit"],
body.contactphp input[type="button"],
body.contactphp a {
    background-color: #d80c18;
    color: #fff;
/*    width: 120px;*/
    height: 50px;
    padding: 0 20px;
    margin: 0 5px;
    border-radius: 25px;
}
body.contactphp a {
    display: inline-block;
    line-height: 50px;
}

/*===============================

	フッター

================================*/
footer {
    padding-top: 63px;
}
.subpage footer {
    padding-top: 0;
}
#tsurui footer {
    background-color: #fbedd6;
}
#tsurui footer div.copyright_area p {
    background-color: #fff;
}
div.info_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
div.info_item.logo {
    margin-bottom: 64px;
}
div.info_item.logo img {
    width: 62.5%;
}
div.info_item.contact {
    margin-bottom: 50px;
}
div.info_item.contact h1, div.info_item.contact p {
    text-align: left;
    font-size: 2.8rem;
    line-height: 1.7;
    letter-spacing: 0.05em;
}
div.info_item.contact h1, div.info_item.contact p.name {
    font-weight: 700;
}
div.info_item.contact a {
    position: relative;
    display: inline-block;
    width: 326px;
    margin-top: 64px;
    background-color: #d80c18;
    border-radius: 32px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 65px;
    letter-spacing: 0.05em;
    color: #fff;
}
div.info_item.contact a:before {
    content: "";
    position: absolute;
    width: 6.75%;
    height: 24.62%;
    top: 39%;
    left: 12.5%;
    background-image: url(../images/icon_mail.png);
    background-size: contain;
    background-repeat: no-repeat;
}
div.info_item.contact a:after {
    content: "";
    position: absolute;
    width: 10.74%;
    height: 10.77%;
    top: 41%;
    right: 10%;
    border-right: 1px solid #ffa7a7;
    border-bottom: 1px solid #ffa7a7;
    transform: skew(45deg);
}
div.info_item.map {
    position: relative;
    width: 100%;
    padding-top: 85%;    
}
div.info_item.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div.copyright_area {
    padding-top: 26px;
    text-align: center;
}
div.copyright_area a img {
    width: 26.7%;
    max-width: 160px;
}
div.copyright_area p {
    display: block;
    border-top: 1px solid #d5d5d5;
    font-size: 2.4rem;
    line-height: 110px;
    color: #646464;
}


@media screen and (max-width: 459px) {
    /*===============================

        共通・全体

    ================================*/

    html {
        font-size: 32%;
    }
    
    /*===============================

        ローディング画面

    ================================*/
    .js-loader {
     background-size: 265px auto;   
    }
    
    /*===============================

        ヘッダー

    ================================*/
    header img.bg_left {
        z-index: 0;
    }
        
    /*
        ハンバーガーメニュー
    ================================*/
    #nav-open {
        width: 62px;
        height: 62px;
    }

    /*===============================

        トップページ（index.html）

    ================================*/

    /*
        高橋農場での1日
    ================================*/
    #oneday_section {
        padding-top: 66px;
        padding-bottom: 89px;
    }
    div.oneday_item.text {
        height: 266px;
    }
    div.oneday_item.text div {
        width: 224px;
    }

    /*
        スタッフ募集中！
    ================================*/
    #staff_section p.h2_sub {
        top: -30px;
    }
    #staff_section a {
        width: 261px;
        border-radius: 26px;
        line-height: 52px;
    }

    /*
        鶴居村での暮らし
    ================================*/
    #tsurui_section {
        padding-top: 98px;
        padding-bottom: 114px;
    }
    div.tsurui_item.text {
        height: 296px;
    }
    div.tsurui_item.text div {
        width: 224px;
    }
    
    
    /*===============================

        高橋農場での1日（oneday.html）

    ================================*/
    #main_oneday h3 {
        height: 36px;
        font-size: 4.0rem;
        white-space: nowrap;
    }
    #main_oneday h3 img {
        width: 38px;
        margin-right: 11px;
    }
    #main_oneday h3 span {
        top: 26px;
        left: 50px;
    }

    /*
        朝のお仕事
    ================================*/
    #early_section h2 {
        min-width: 175px;
    }
    
    /*
        午前中のお仕事
    ================================*/
    #morning_section h2 {
        min-width: 206px;
    }
    div.morning_item:nth-child(1) div.text {
        min-width: 270px;
    }

    /*
        午後のお仕事
    ================================*/
    #afternoon_section h2 {
        min-width: 199px;
    }
    div.afternoon_item:nth-child(1) div.text {
        min-width: 290px;
    }
    div.afternoon_item:nth-child(3) div.text {
        width: 56%;
    }
    
    /*
        働くスタッフの声
    ================================*/
    #voice_section h2 img {
        min-width: 160px;
    }
    #voice_section > div img.name {
        min-width: 160px;
        bottom: -40px;
    }
    #voice_section dl {
        min-width: initial;
    }
    #voice_section dt br {
        display: none;
    }

    /*===============================

        スタッフ募集（staff.html）

    ================================*/

    /*
        高橋農場からのメッセージ
    ================================*/
    #message_section {
        padding-bottom: 80px;
        background-size: 103px auto;
        background-position: left 2% bottom -5%;
    }
    #message_section div {
       margin-bottom: 52px;
    }
    #message_section h2 {
        min-width: 206px;
        bottom: -80px;
    }

    /*
        募集要項
    ================================*/
    #job_section div.job_area:not(:last-child) {
        margin-bottom: 50px;
    }

    
    /*===============================

        鶴居村での暮らし（tsurui.html）

    ================================*/

    /*
        鶴居村ってどこ？
    ================================*/
    #location_section h2 {
        min-width: 270px;
    }
    
    /*
        気候風土・移住支援
    ================================*/
    #features_section {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    div.climate_area {
        margin-bottom: 28px;
    }
    div.climate_area h3 {
        min-width: 150px;
    }
    div.climate_area div > img {
        border-radius: 7px;
    }
    div.support_title {
        align-items: flex-end;
    }
    div.support_title h3 {
        min-width: 144px;
    }
    
    /*
        鶴居村には他にはない施策がたくさん！
    ================================*/
    #policy_section {
        padding-top: 130px;
    }
    #policy_section h2 {
        max-width: 300px;
        min-width: 280px;
    }
    #policy_section ul {
        min-width: 286px;
    }
    #policy_section li:not(:last-child) {
        height: 52px;
    }
    #policy_section li br {
        display: none;
    }
    #policy_section a {
        width: 280px;
        padding-left: 34px;
        border-radius: 26px;
        line-height: 52px;
    }
    
    
    /*===============================

        会社概要（company.html）

    ================================*/
    #main_company p:not(:last-of-type) {
        margin-bottom: 24px;
    }

    /*
        高橋農場のはじまり・歴史
    ================================*/
    #main_company div.title_area {
         margin-bottom: 45px;
    }
    
    /*
        あの時から今まで、ずっと酪農一筋。
    ================================*/
    #history02_section {
        padding-bottom: 60px;
    }
    #history02_section > div {
        margin-bottom: 24px;
    }
    
    /*
        会社概要
    ================================*/
    #profile_section dl {
        min-width: 300px;
    }
    #profile_section dt {
        width: 32%;
    }
    #profile_section dd {
        width: 68%;
        padding-left: 10px;
        font-feature-settings: "palt";
    }
    
    /*===============================

        お問い合わせ（contact.html）

    ================================*/
    #main_contact dt:not(:last-of-type) {
        height: 33px;
        margin-bottom: 20px;
    }
    #main_contact dt:last-of-type {
        margin-top: 6px;
        margin-bottom: 12px;
    }
    #main_contact dd:not(:last-of-type) {
        height: 33px;
    }
    #main_contact div.btn_wrap  {
        width: 261px;
        border-radius: 26px;
        line-height: 52px;
    }
    
    /*===============================

        フッター

    ================================*/
    footer {
        padding-top: 50px;
    }
    div.info_item.logo {
        margin-bottom: 51px;
    }
    div.info_item.contact {
        margin-bottom: 40px;
    }
    div.info_item.contact a {
        width: 261px;
        margin-top: 51px;
        border-radius: 26px;
        line-height: 52px;
    }
    div.copyright_area {
        padding-top: 21px;
    }
    div.copyright_area p {
        line-height: 88px;
    }
}


@media screen and (min-width: 770px) {

    /*===============================

        共通・全体

    ================================*/
    html {
        font-size: 38%;
    }
    img.sp {
        display: none;
    }
    img.pc {
        display: inline;
    }
    br.sp {
        display: none;
    }

    
    /*===============================

        ヘッダー

    ================================*/
    body.subpage header {
        height: 350px;
        background-image: url(../images/header_pcbg_left.png), url(../images/header_pcbg_right.png);
        background-position: left -120px top, right -100px top;
        background-repeat: no-repeat;
    }
    header img.logo {
        position: absolute;
        top: 23px;
        left: 3%;
        width: 12.2%;
        min-width: 130px;
    }
    header p.h1_sub {
        font-size: 3.5rem;
    }
    header h1 {
        font-size: 6.9rem;
    }
    header img.bg_right {
        bottom: 0;
    }
    
    /*
        ハンバーガーメニュー
    ================================*/
    #nav-content {
        width: 460px;
        left: auto;
        right: 0;
    }
    #nav-content.open {
        width: 460px;
        left: auto;
        right: 0;
        opacity: 0.95;
    }
    
    /*===============================

        トップページ（index.html）

    ================================*/
    h2 {
        font-size: 5rem;
    }
    #main_top section p.h2_sub {
        font-size: 4.6rem;
    }

    /*
        スライドショー
    ================================*/
    div.mv_area {
        padding-top: 6.2%;
        margin-bottom: 5.2%;
    }
    div.mv_area img.nav_bg {
        width: 21.1%;
        min-width: 201px;
    }
    div.mv_area a {
        bottom: 1.5%;
        width: 3.9%;
        min-width: 40px;
    }
    div.mv_area img.slide_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 57.5%;
    }
    div.mv_area div.slide_text {
        right: 56%;
        bottom: 25%;
        z-index: 2;
    }
    div.slide_wrapper {
        width: 70%;
        margin-right: 0;
        margin-left: auto;
    }
    div.slide {
        padding-top: 57.14%;
    }
    
    /*
        高橋農場での1日
    ================================*/
    #oneday_section {
        padding-top: 145px;
        background-image: url(../images/top/oneday_bg_left.png), url(../images/top/oneday_bg_right.png);
        background-position: left 40px bottom, right top 28px;
        background-repeat: no-repeat;
    }
    div.oneday_wrapper {
        position: relative;
        max-width: 1300px;
    }
    div.oneday_area {
        display: flex;
        justify-content: space-between;
    }
    #oneday_section p.h2_sub {
        margin-left: auto;
        margin-right: 0.8%;
        text-align: right;
    }    
    #oneday_section a {
        float: left;
        position: relative;
        display: inline-block;
        width: 255px;
        margin-left: 2%;
        padding: 0;
        border-bottom: 0;
        background-color: #d80c18;
        border-radius: 27px;
        font-size: 2.4rem;
        line-height: 54px;
        color: #fff;
        text-align: center;
    }
    #oneday_section a:after {
        width: 20.25%;
        height: 10.77%;
        top: 41%;
        right: 14.1%;
        bottom: initial;
        border-right: 1px solid #ffa7a7;
        border-bottom: 1px solid #ffa7a7;
    }
    #oneday_section a:hover:after {
        right: 12.1%;
    }
    div.oneday_item.photo {
        width: 52.6%;
        margin-top: -111px;
        z-index: 1;
    }
    div.oneday_item.photo img {
        border-radius: 0 10px 10px 0;
    }
    div.oneday_item.text {
        width: 64%;
        margin-top: 0;
        margin-left: -12.9%;
        border-radius: 10px 0 0 10px;
    }
    div.oneday_item.text div {
        width: 60%;
        transform: none;
        top: 50%;
        transform: translateY(-50%);
        left: 30.6%;
    }
    div.oneday_wrapper > img {
        transform: scale(-1, 1);
        width: 140px;
        bottom: -105px;
        right: 0.4%;
        left: auto;
    }
    
    /*
        スタッフ募集中！
    ================================*/
    div.bg_wrapper {
        background-color: #fff;
        background-image: none;
    }
    #staff_section {
        padding-bottom: 54px;
    }
    #staff_section div {
        margin-bottom: 30px;
    }
    #staff_section div.staff_photo {
        position: relative;
        padding-top: 30%;
        overflow: hidden;
    }
    #staff_section div.staff_photo img {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }
    #staff_section img.staff_text {
        width: 17.9%;
        min-width: 200px;
        bottom: -50px;
        left: 2%;
    }
    #staff_section a {
        width: 255px;
        border-radius: 27px;
        line-height: 54px;
    }
    #staff_section a:hover:after {
        right: 12.1%;
    }

    
    /*
        鶴居村での暮らし
    ================================*/
    #tsurui_section {
        padding-top: 135px;
        padding-bottom: 108px;
        background-color: #fbedd6;
    }
    #tsurui_section p.h2_sub {
        margin-right: auto;
        margin-left: 0.4%;
        text-align: left;
    }
    #tsurui_section a {
        float: left;
        position: relative;
        display: inline-block;
        width: 255px;
        margin-left: 2%;
        padding: 0;
        border-bottom: 0;
        background-color: #d80c18;
        border-radius: 27px;
        font-size: 2.4rem;
        line-height: 54px;
        color: #fff;
        text-align: center;
    }
    #tsurui_section a:after {
        width: 20.25%;
        height: 10.77%;
        top: 41%;
        right: 14.1%;
        bottom: initial;
        border-right: 1px solid #ffa7a7;
        border-bottom: 1px solid #ffa7a7;
    }
    #tsurui_section a:hover:after {
        right: 12.1%;
    }
    div.tsurui_wrapper {
        position: relative;
        max-width: 1300px;
        margin-right: 0;
        margin-left: auto;
    }
    div.tsurui_area {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    div.tsurui_item.photo {
        width: 52.6%;
        margin-top: -115px;
        margin-left: -12.9%;
        z-index: 1;
    }
    div.tsurui_item.photo img {
        border-radius: 10px 0 0 10px;
    }
    div.tsurui_item.text {
        width: 60.3%;
        margin-top: 0;
        border-radius: 10px;
    }
    div.tsurui_item.text div {
        width: 64%;
        transform: none;
        top: 50%;
        transform: translateY(-50%);
        left: 9.7%;
    }
    
    
    /*===============================

        高橋農場での1日（oneday.html）

    ================================*/
    #main_oneday h3 {
        font-size: 3.62rem;
    }
    #main_oneday p {
        font-size: 2.64rem;
    }

    
    /*
        朝のお仕事
    ================================*/
    #early_section {
        position: relative;
    }
    #early_section h2 {
        width: 272px;
        margin-left: auto;
        margin-right: auto;
    }
    div.early_area {
        display: flex;
        justify-content: space-between;
        width: 1025px;
        max-width: 94%;
        margin: 0 auto;
    }
    div.early_item, div.early_item:nth-child(2), div.early_item:nth-child(3) {
        width: 29.3%;
        min-width: 216px;
        margin: 0;
    }
    div.early_item:not(:last-child) {
        margin-bottom: 0;
    }
    div.early_item:nth-child(1) {
        position: static;
    }
    div.early_item:nth-child(1) div.photo {
        width: 100%;
    }
    div.early_item:nth-child(1) div.photo img {
        border-radius: 10px;   
    }
    div.early_item:nth-child(1) div.text {
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        border-radius: 0;    
        background: none;
    }
    div.early_item:nth-child(1) > img {
        transform: scale(-1, 1);
        width: 13.4%;
        right: 2.4%;
        bottom: 29px;
        left: auto;
    }
    div.early_item:nth-child(2), div.early_item:nth-child(3) {
        display: block;
        z-index: 1;
    }
    div.early_item:nth-child(2) div.text, div.early_item:nth-child(3) div.text {
        margin-top: 30px;
    }
    div.early_item:nth-child(2) div.photo, div.early_item:nth-child(3) div.photo {
        position: relative;
        padding-top: 66.67%;
    }
    div.early_item:nth-child(2) div.photo img, div.early_item:nth-child(3) div.photo img {
        position: absolute;
        top: 0;
        height: 100%;
        object-fit: cover;
    }
    
    /*
        午前中のお仕事
    ================================*/
    #morning_section h2 {
        width: 321px;
        margin-left: auto;
        margin-right: auto;
    }
    div.morning_area {
        display: flex;
        justify-content: space-between;
        width: 1025px;
        max-width: 94%;
        margin: 0 auto;
    }
    div.morning_item, div.morning_item:nth-child(2), div.morning_item:nth-child(3) {
        width: 29.3%;
        min-width: 216px;
        margin: 0;
    }
    div.morning_item:nth-child(1) {
        margin-bottom: 0;
    }
    div.morning_item:nth-child(1) div.photo {
        width: 100%;
    }
    div.morning_item:nth-child(1) div.photo img {
        border-radius: 10px;   
    }
    div.morning_item:nth-child(1) div.text {
        width: 100%;
        min-width: initial;
        margin: 30px 0 0 0;
        padding: 0;
        border-radius: 0;    
        background: none;
    }
    div.morning_item:nth-child(2) {
        display: block;
    }
    div.morning_item:nth-child(2) div.text {
        margin-top: 30px;
    }
    div.morning_item:nth-child(2) div.photo {
        position: relative;
        padding-top: 66.67%;
    }
    div.morning_item:nth-child(2) div.photo img {
        position: absolute;
        top: 0;
        height: 100%;
        object-fit: cover;
    }
    div.morning_item:nth-child(3) div:not(:last-child) {
         margin-bottom: 30px;   
    }
    div.morning_item:nth-child(3) div:last-child h3 {
        white-space: nowrap;
    }
        
    /*
        午後のお仕事
    ================================*/
    #afternoon_section {
        background-image: url(../images/oneday/afternoon_bg_bottom.png), url(../images/oneday/afternoon_bg_left.png), url(../images/oneday/afternoon_bg_right.png);
        background-size: 255px, auto, auto;
        background-position: bottom center, left 33px bottom 97px, right top 28px;
        background-repeat: no-repeat;
    }
    #afternoon_section h2 {
        width: 310px;
        margin-left: auto;
        margin-right: auto;
    }
    div.afternoon_area {
        display: flex;
        justify-content: space-between;
        width: 1025px;
        max-width: 94%;
        margin: 0 auto;
    }
    div.afternoon_item:not(:last-child) {
        margin-bottom: 0;
    }
    div.afternoon_item, div.afternoon_item:nth-child(2), div.afternoon_item:nth-child(3) {
        width: 29.3%;
        min-width: 216px;
        margin: 0;
    }
    div.afternoon_item:nth-child(1) div.photo {
        width: 100%;
    }
    div.afternoon_item:nth-child(1) div.photo img {
        border-radius: 10px;   
    }
    div.afternoon_item:nth-child(1) div.text {
        width: 100%;
        min-width: initial;
        margin: 30px 0 0 0;
        padding: 0;
        border-radius: 0;    
        background: none;
    }
    div.afternoon_item:nth-child(2) {
        display: block;
    }
    div.afternoon_item:nth-child(2) p {
        margin-bottom: 0;
    }
    div.afternoon_item:nth-child(2) div.text {
        margin-top: 30px;
    }
    div.afternoon_item:nth-child(2) div.photo {
        position: relative;
        padding-top: 66.67%;
    }
    div.afternoon_item:nth-child(2) div.photo img {
        position: absolute;
        top: 0;
        height: 100%;
        object-fit: cover;
    }
    div.afternoon_item:nth-child(3) {
        position: relative;
        display: block;
        background-color: #fff;
        border-radius: 10px;
        padding: 40px 4%;
    }
    div.afternoon_item:nth-child(3) div.text {
        width: 100%;
    }
    div.afternoon_item:nth-child(3) div.photo {
        position: absolute;
        width: 130px;
        right: -20px;
        bottom: -40px;
    }
    
    /*
        働くスタッフの声
    ================================*/
    #voice_section {
        margin-top: -25px;
        padding-bottom: 90px;
    }
    #voice_section h2 img {
        width: 249px;
    }
    #voice_section > div {
        width: 784px;
        max-width: 80%;
    }
    #voice_section > div img.name {
        width: 230px;
        right: -50px;
        bottom: -44px;
    }
    #voice_section dl {
        display: flex;
        justify-content: space-between;
        width: 1094px;
        max-width: 90%;
    }
    #voice_section dl div {
        width: 45%;
    }

    /*===============================

        スタッフ募集（staff.html）

    ================================*/

    /*
        高橋農場からのメッセージ
    ================================*/
    #message_section {
        background-size: 202px auto;
        background-position: left 18% bottom -10%;
    }
    #message_section div {
        margin-bottom: 100px;
    }
    
    /*
        YouTube
    ================================*/
    #youtube_section {
        background-color: #fbedd6;
        padding-bottom: 40px;
    }
    #youtube_section > div {
        max-width: 700px;
        margin: 0 auto;
        padding-top: 394px;
    }

    /*
        募集要項
    ================================*/
    #job_section h2 {
        margin-bottom: 50px;
        font-size: 5rem;
    }
    #job_section div.job_wrapper {
        display: flex;
        justify-content: space-between;
        width: 96%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    } 
    #job_section div.job_area {
        width: 45%;
    }
    #job_section div.job_area:not(:last-child) {
        margin-bottom: 40px;
    }
    

    /*===============================

        鶴居村での暮らし（tsurui.html）

    ================================*/
    #location_section {
        padding: 50px 0;
    }
    #location_section div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 94%;
        max-width: 900px;
        margin: 0 auto;
    }
    #location_section h2 {
        width: 43%;
    }
    #location_section p {
        width: 52%;
    }
    
    /*
        気候風土・移住支援
    ================================*/
    div.features_inner {
        display: flex;
        max-width: 1005px;
        margin: 0 auto;
    }
    div.climate_area h3 {
        width: 214px;
    }
    div.climate_area > div img {
        border-radius: 7px;
    }
    div.support_area {
        margin-top: -27px;
    }
    div.support_title {
        align-items: flex-end;
    }
    div.support_title h3 {
        width: 201px;
    }
    
    /*
        鶴居村には他にはない施策がたくさん！
    ================================*/
    #policy_section {
        padding-bottom: 60px;
    }
    #policy_section h2 {
        width: 360px;
    }
    #policy_section ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 98%;
        max-width: 900px;
    }
    #policy_section li:nth-child(odd) {
        width: 50%;
    }
    #policy_section li:nth-child(even) {
        width: 47%;
    }
    #policy_section li:not(:last-child) {
        padding: 0 2%;
    }
    #policy_section li:last-child {
        width: 99.5%;
    }
    #policy_section a {
        border-radius: 27px;
        line-height: 54px;
    }
    #policy_section a:hover:after {
        right: 8%;
    }
    
    /*===============================

        会社概要（company.html）

    ================================*/
    #main_company {
        padding-bottom: 50px;
    }
    #main_company p {
        max-width: 800px;
    }   
    
    /*
        高橋農場のはじまり・歴史
    ================================*/
    #main_company div.title_area h2 {
        right: -10%;
        bottom:-18%;
    }
    
    /*
        親父が兄弟三人で始めた酪農。
    ================================*/
    #history01_section h3  {
        max-width: 457px;
    }

    /*
        あの時から今まで、ずっと酪農一筋。
    ================================*/ 
    #history02_section {
        padding-top: 240px;
    }
    #history02_section h3 {
        max-width: 278px;
        left: 50.5%;
    }
    #history02_section > div {
        display: flex;
        justify-content: space-between;
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
    }
    #history02_section > div div {
        width: 46%;
    }
    #history02_section > div p {
        width: 48%;
    }

    /*
        会社概要
    ================================*/
    #profile_section dl {
        max-width: 700px;
    }
    #profile_section dd {
        padding: 20px 0;
        padding-left: 23px;
    }
    #profile_section dd br {
        display: none;
    }
    
    /*===============================

        お問い合わせ（contact.html）

    ================================*/
    #main_contact form {
        max-width: 800px;
    }
    #main_contact dt:not(:last-of-type) {
        width: 12%;
    }
    #main_contact dd:not(:last-of-type) {
        width: 88%;
    }
    #main_contact input[type="text"],
    #main_contact input[type="tel"],
    #main_contact input[type="email"] {
        width: 50%;
    }
    #main_contact div.btn_wrap {
        width: 290px;
        border-radius: 27px;
        line-height: 54px; 
    }
    #main_contact div.btn_wrap:hover:after {
        right: 10%;
    }
    #main_contact > img {
        width: 21.5%;
        max-width: 180px;
        bottom: -70px;
        z-index: 1;
    }

    /*===============================

        フッター

    ================================*/
    div.info_area {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    div.info_item.logo {
        width: 323px;
        margin-bottom: 0;
        border-right: 1px solid #cdcdcd;
    }
    div.info_item.logo img {
        width: 209px;
    }
    div.info_item.contact {
        width: 429px;
        margin-bottom: 0;
    }
    div.info_item.contact h1, div.info_item.contact p {
        width: 315px;
        font-size: 2.5rem;
        margin: 0 auto;
    }
    div.info_item.contact a {
        width: 316px;
        margin-top: 20px;
        border-radius: 27px;
        line-height: 54px;
    }
    div.info_item.contact a:hover:after {
        right: 8%;
    }
    div.info_item.map {
        width: 100%;
        padding-top: 63px;    
    }
    div.info_item.map iframe {
        position: relative;
        height: 338px;
    }
    div.copyright_area {
        position: relative;
        padding-top: 0;
    }
    div.copyright_area a img {
        position: absolute;
        right: 7%;
        bottom: 0;
        width: 100px;
    }
    div.copyright_area p {
        line-height: 134px;
    }
}


@media screen and (min-width: 1100px) {

    /*===============================

        ヘッダー

    ================================*/
    body.subpage header {
        background-position: left top, right top;
    }
        
    /*
        ハンバーガーメニュー
    ================================*/
    #nav-open {
        width: 100px;
        height: 100px;
    }
    /*ハンバーガーアイコン*/
    #nav-open span {
        width: 36px;
        height: 45px;
    }

    
    /*===============================

        トップページ（index.html）

    ================================*/

    /*
        スライドショー
    ================================*/
    div.mv_area div.slide_text p {
        font-size: 6.3rem;
    }
    
    /*
        スタッフ募集中！
    ================================*/
    #staff_section img.staff_text {
        left: 13.4%;
    }
    
        
    /*===============================

        高橋農場での1日（oneday.html）

    ================================*/
    #morning_section h3 {
        white-space: nowrap; 
    }
    
    /*
        午前中のお仕事
    ================================*/
    div.morning_item:nth-child(3) div:not(:last-child) {
         margin-bottom: 60px;   
    }
            
    /*
        午後のお仕事
    ================================*/
    div.afternoon_item:nth-child(3) {
        padding: 70px 35px;
    }
    div.afternoon_item:nth-child(3) p {
        margin-top: 10px;
    }
    div.afternoon_item:nth-child(3) div.photo {
        width: 146px;
        right: -30px;
        bottom: -40px;
    }
    
    
    /*===============================

        スタッフ募集（staff.html）

    ================================*/

    /*
        YouTube
    ================================*/
    #youtube_section > div {
        max-width: 800px;
        margin: 0 auto;
        padding-top: 450px;
    }
    
    /*===============================

        フッター

    ================================*/
    footer {
        padding-top: 0;
    }
    div.info_item.logo {
        width: 23.43%;
    }
    div.info_item.contact {
        width: 31.09%;
    }
    div.info_item.map {
        width: 45.48%;
        padding-top: 0;    
    }
    div.info_item.map iframe {
        position: relative;
        height: 338px;
    }
    div.copyright_area a img {
        right: 13.5%;
    }
}

@media screen and (min-width: 1300px) {
    
    /*===============================

        ヘッダー

    ================================*/
    header img.logo {
        min-width: 183px;
    }
    
    /*
        ハンバーガーメニュー
    ================================*/
    #nav-open {
        width: 130px;
        height: 130px;
    }
    /*ハンバーガーアイコン*/
    #nav-open span {
        width: 47px;
        height: 59px;
    }
    
    /*===============================

        トップページ（index.html）

    ================================*/

    /*
        スライドショー
    ================================*/
    div.mv_area img.nav_bg {
        min-width: 316px;
    }
    div.mv_area div.slide_text {
        right: 62%;
        bottom: 28%;
    }
    div.mv_area div.slide_text p {
        padding: 0 25px;
        font-size: 6.92rem;
    }
    div.mv_area div.slide_text p:not(:last-child) {
        margin-bottom: 20px;
    }
    
    /*
        高橋農場での1日
    ================================*/    
    div.oneday_item.text {
        height: 386px;
        border-radius: 10px;
    }
    div.oneday_wrapper > img {
        width: 202px;
        bottom: -68px;
        right: -130px;
    }    
    
    /*
        スタッフ募集中！
    ================================*/
    #staff_section img.staff_text {
        bottom: -70px;
        left: 13.4%;
    }
    
    /*
        鶴居村での暮らし
    ================================*/
    div.tsurui_item.text {
        height: 386px;
    }
    
    
    /*===============================

        フッター

    ================================*/
    div.info_area {
        max-width: 1500px;
        margin-right: 0;
        margin-left: auto;
    }
}