@charset "utf-8";
/* CSS Document */

/* =======================================
	2023.04  No.196
    p03/ スウェーデンハウス紀行
======================================= */

/*---Text---*/

p{
  font-size:17px;
  line-height:32px;
  margin-bottom:1em;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight:500;
    letter-spacing:0.1em;
}

span{
    display: inline-block;
    letter-spacing:0;
}

h3,h4,h5,h6{
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight:700;
}

span.anno{
    display:inline-block;
    font-size:13px;
    line-height:22px;
   font-family: 'Zen Maru Gothic', sans-serif;
   font-weight:500; 
}

div.moose,
div.swedi{
    width:52%;
    position:relative;
    z-index:10;
}

div.moose img{
    position:absolute;
    width:32%;
}

div.swedi img{
    position:absolute;
    width:28%;
}

div.moose p,
div.swedi p{
    background:#FFF;
    border-radius:40px;
    font-size:16px;
    line-height:25px;
    text-align: center;
    padding:2em;
    transition:2s;
}

div.moose p{
    color:#009AAA;
}

div.swedi p{
    color:#EE7800;
}

a.btn_map{
    display:block;
    border:dashed 1px #009AAA;
    color:#009AAA;
    border-radius:30px;
    padding:0.6em 0;
    text-align:center;
    font-weight:bold;
    font-size:0.9em;
    line-height:1.2em;
    margin:1.5em auto;
    transition:1s;
}

a.btn_map span{
    font-size:0.8em;
}

a.btn_map:hover{
    color:#FFF;
    background:#009AAA;
    text-decoration: none;
}

h4{
    z-index:2;
}
h5{
    z-index:3;
}

/* =======================================
	PC
======================================= */

/*---Layout---*/

div.pageNavi{
    display:block;
}

#mainArea{
    background:#F7F1E3;
    padding-bottom:2em;
}

.contArea{
    width:88%;
    max-width:1200px;
    min-width:850px;
    margin:0 auto;
}

.titleArea{
    width:90%;
    padding:3em 0;
    margin:0 auto 5em;
}

.titleArea h2{
    width:84%;
    margin:0 auto 1.5em;
    background:url("../../../assets/images/parts/tec/tec_title.png") no-repeat;
    background-size:100% auto;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

.titleArea h2 img{
    opacity:0;
    animation-fill-mode: forwards;
}

.titleArea h3{
    width:98%;
    margin:-3em 2% 0 0;
}

.titleArea h2 img,
.titleArea h3 img{
    width:100%;
}

.titleArea p{
    text-align: center;
    margin:0 auto;
    animation-duration: 3s;
}

.textArea{
    width:90%;
    margin:0 auto;
    position:relative;
}

div.pWrap{
    margin:0 auto 5em;
    position:relative;
}

div.pWrap h4{
    width:42%;
    margin-bottom:0.8em;
}

div.pWrap h4 > img{
    width:100%;
}

div.column{
    background:#CEE4E3;
    border-radius:40px;
    padding:2.5em 0;
}

div.column h5{
    width:88%;
    font-size:22px;
    line-height:1.5em;
    letter-spacing:0.1em;
    text-align: center;
    border-bottom:solid 1px #000;
    padding-bottom:0.5em;
    margin:0 auto 0.5em;
}

div.column hr{
    width:88%;
    height:0;
    padding:0;
    margin:0 auto 1.5em;
	border-top: 1px solid #000;
}

div.column ul{
    width:88%;
    margin:0 auto;
    padding-top:2em;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    justify-content: space-between;
	gap: 1.5%;
}

div.column ul li{
    width:28%;
    position:relative;
    margin:0 auto 1.5em;
}

div.column ul li img{
    width:25%;
    display:inline-block;
    margin-right:0.2em;
    vertical-align: middle;
}

div.column ul li:nth-child(2) > img{
    animation-delay: 0.5s;
}
div.column ul li:nth-child(3) > img{
    animation-delay: 1s;
}
div.column ul li:nth-child(4) > img{
    animation-delay: 1.1s;
}
div.column ul li:nth-child(5) > img{
    animation-delay: 1.5s;
}
div.column ul li:nth-child(6) > img{
    animation-delay: 1.8s;
}

div.column ul li:nth-child(2){
    animation-delay: 0.5s;
}
div.column ul li:nth-child(3){
    animation-delay: 1s;
}
div.column ul li:nth-child(4){
    animation-delay: 1.1s;
}
div.column ul li:nth-child(5){
    animation-delay: 1.5s;
}
div.column ul li:nth-child(6){
    animation-delay: 1.8s;
}

div.column ul li h6{
    width:72%;
    font-size:19px;
    letter-spacing: 0.1em;
    display:inline-block;
    vertical-align: middle;
}

div.column p{
    width:88%;
    margin:0 auto 1.5em;
    letter-spacing:0.5px;
}

div.column ul li p{
    width:100%;
}

div.ill img{
    width:100%;
}

/*cont1-1*/
div.pWap#cont1-1{
    padding-bottom:2.5em;
}

#cont1-1 div.moose p{
    width:70%;
    margin-left:22%;
}

#cont1-1 div.moose img{
    position:absolute;
    left:5%;
    top:-1.5em;
}

#cont1-1 div.swedi{
    position:absolute;
    right:0;
    bottom:0;
}

#cont1-1 div.swedi p{
    width:70%;
    margin-right:22%;
}

#cont1-1 div.swedi img{
    position:absolute;
    right:7%;
    bottom:-4em;
}

#cont1-1 span.anno{
    width:40%;
    margin-left:13%;
}

/*cont1-2*/
#cont1-2{
    padding-top:3.5em;
}

#cont1-2 h5{
    width:35%;
    position:absolute;
    left:0;
    top:0;
    animation-duration: 0.5s;
}

#cont1-2 h5 img{
    width:100%;
}

#cont1-2 #pho_01{
    width:50%;
    margin-left:8%;
}

#cont1-2 p{
    width:35%;
    position:absolute;
    right:0;
    top:3em;
    animation-duration: 3s;
}

/*cont1-3*/
#cont1-3{
    position:relative;
    margin-top:-12%;
}


#cont1-3 div.moose.mos1{
    width:60%;
    margin:0 0 0 40%;
}

#cont1-3 div.moose.mos1 p{
    padding:3em 0;
}

#cont1-3 div.moose.mos2{
    width:50%;
    margin:-5% 0 0;
}

#cont1-3 div.moose.mos2 p{
    width:90%;
    padding:3em 0;
}

#cont1-3 div.moose.mos2 img{
    left:-8%;
    top:-22%;
}

#cont1-3 #ill01{
    width:45%;
    position:absolute;
    right:3%;
    top:11%;
    z-index:10;
}

#cont1-3 #ill01 img{
    width:100%;
    animation-duration: 1.5s;
}

#cont1-3 #ill01 img:last-child{
    width:80%;
    margin-left:10%;
    margin-top:1%;
    animation-duration: 0.5s;
}


#cont1-3 #ill03{
    width:100%;
}

#cont1-3 #ill03 img{
    width:55%;
    margin:15% 0 2em 0;
}

#cont1-3 #ill03 p{
    display: block;
    margin-left:8%;
    letter-spacing: 0;
}

/*cont2*/
.titleArea #ill_main{
    width:80%;
    position:relative;
    margin:-1em auto 0;
    padding-bottom:10%;
}

.titleArea #ill_main img{
    width:100%;
}

.titleArea #ill_main div.moose{
    width:40%;
    position:absolute;
    left:-15%;
    top:8%;
}
.titleArea #ill_main div.swedi{
    width:52%;
    margin:3% 0 0 48%;
}

.titleArea #ill_main div.swedi p{
    position:absolute;
    right:-15%;
}

/*#cont2-1*/
#cont2-1 h4{
    width:42%;
    position:absolute;
    left:0;
    top:-17%;
}

#cont2-1 > p{
    width:44%;
    position: absolute;
    right:0;
    top:-3.5em;
}

#cont2-1 #ill04{
    width:55%;
}
#cont2-1 #ill05{
    width:60%;
    margin-left:40%;
    margin-top:-24%;
}

/*#cont2-2*/
#cont2-2{
    padding-top:12%;
}

#cont2-2 h4{
    width:42%;
    margin-left:58%;
}
#cont2-2 > p{
    width:42%;
    margin-left:58%;
}
#cont2-2 #ill06{
    width:52%;
    position:absolute;
    left:0;
    bottom:-7em;
    z-index:10;
}


/*#cont2-3*/
#cont2-3{
    position:relative;
}

#cont2-3 div.swedi{
    position:absolute;
    right:0;
    bottom:-23%;
}

#cont2-3 div.swedi p{
    width:60%;
    margin-right:22%;
}

#cont2-3 div.swedi img{
    position:absolute;
    right:7%;
    bottom:-10%;
}

/*#cont2-4*/
#cont2-4 {
    padding-top:9em;
    padding-bottom:3em;
}

#cont2-4 #ill07{
    width:72%;
    position:absolute;
    right:-3%;
    top:25%;
    z-index:8;
}
#cont2-4 > h4{
    margin:0 0 1.5em 0;
}

#cont2-4 > p{
    position:relative;
    width:27%;
}


/*#cont2-5*/
#cont2-5{
    position:relative;
    width:70%;
    margin:0 0;
}

#cont2-5 div.moose{
    position:absolute;
    right:-35%;
    bottom:-40%;
}

#cont2-5 div.moose img{
    width:40%;
    position:absolute;
    left:-25%;
    bottom:10%;
}

/*#cont2-6*/

#cont2-6{
    padding:10em 0 0 0;
    margin:8em 0 3em;
}

#cont2-6 #ill08{
    width:56%;
    position:absolute;
    left:0;
    top:-6em;
    z-index:8;
}

#cont2-6 h4{
    width:42%;
    margin-left:58%;
}
#cont2-6 > p{
    width:42%;
    margin-left:58%;
}


/*#cont2-7*/
#cont2-7 div.moose{
    width:46%;
    position:absolute;
    right:5%;
    bottom:-28%;
}

#cont2-7 div.moose img{
    position:absolute;
    left:-10%;
    top:-10%;
}

/*#cont2-8*/
#cont2-8{
    margin:20em 0 0;
}

#cont2-8 h4{
    
}

#cont2-8 #ill09{
    width:58%;
    position:absolute;
    right:-3%;
    top:5%;
    z-index:8;
}

#cont2-8 > p{
    width:42%;
    margin-bottom:5em;
}


/*#cont2-9*/
#cont2-9{
    position:relative;
    width:65%;
    margin:3em 0 12em;
}

#cont2-9 div.moose{
    position:absolute;
    right:-45%;
    bottom:-40%;
}

#cont2-9 div.moose img{
    width:42%;
    position:absolute;
    right:-15%;
    left:auto;
    top:-43%;
    z-index:5;
}

#cont2-9 div.swedi{
    position:absolute;
    right:-8%;
    bottom:-65%;
}

#cont2-9 div.swedi p{
    width:65%;
}

#cont2-9 div.swedi img{
    width:40%;
    position:absolute;
    left:0;
    top:-60%;
}

/*#cont2-10*/
#cont2-10{
    padding-top:15%;
}


#cont2-10 h4{
    width:37%;
    margin-left:62%;
}
#cont2-10 > p{
    width:37%;
    margin-left:62%;
}


#cont2-10 #ill10{
    width:62%;
    position:absolute;
    left:-3%;
    top:-3em;
}

#cont2-10 div.moose{
    width:36%;
    margin-left:55%;
}

#cont2-10 div.moose img{
    width:42%;
    position:absolute;
    right:-30%;
    bottom:0;
    z-index:5;
}

/*#cont2-11*/

#cont2-11{
    padding-top:3em;
}

#cont2-11 > p{
    width:42%;
    margin-bottom:8em;
}

#cont2-11 #ill11{
    width:58%;
    position:absolute;
    right:-4%;
    top:0;
}

#cont2-11 div.swedi{
    width:40%;
    margin:1.5em 0 0;
}

#cont2-11 div.swedi p{
    padding:3.5em 1em;
}

#cont2-11 #ill_btm{
    width:74%;
    margin:-6em auto 0;
    position:relative;
    z-index:12;
} 

#cont2-11 #ill_btm img{
    width:100%;
}

/*#cont2-12*/

#cont2-12 p{
    width:68%;
    margin-left:23%;
    margin-bottom:1em;
}

#cont2-12 img{
    position:absolute;
    width:32%;
    left:-8%;
    top:-8%;
}

/*矢印*/
img.arw{
    position:absolute;
    z-index:10;
}

#arw01{
    width:15%;
    right:17%;
    top:-18%;
}
#arw02{
    width:15%;
    left:15%;
    top:-14%;
}
#arw03{
    width:13%;
    right:26%;
    top:1.5%;
}
#arw04{
    width:15%;
    left:15%;
    bottom:-42%;
}
#arw05{
    width:15%;
    right:12%;
    top:-9%;
}
#arw06{
    width:15%;
    left:18%;
    bottom:-23%;
}

div.textArea p a.btn{
    display:block;
    width:40%;
    min-width:400px;
    padding:0.3em 0;
    border:dashed 1px #009AAA;
    color:#009AAA;
    border-radius:40px;
    font-size:17px;
    font-weight:700;
    text-align: center;
    transition:0.5s;
    margin:0 auto 5em;
    position:relative;
}

div.textArea p a.btn img.swedi{
    width:30%;
    position:absolute;
    left:-12%;
    bottom:-1.2em;
}
div.textArea p a.btn img.flag{
    width:15%;
    position:absolute;
    right:-6%;
    top:-1em;
}

div.textArea p a.btn:hover{
    text-decoration: none;
    background:#009AAA;
    color:#FFF;
}

/* =======================================
	DISPLAY LARGE
======================================= */

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

/* =======================================
	TABLET
======================================= */

@media screen and  (min-width:1025px) and ( max-width:1300px) {
    
    p,h6{
    font-size:95%;
    }

    div.moose p,
    div.swedi p{
    padding:1.5em;
    font-size:95%;
}
    
}

@media screen and  (min-width:641px) and ( max-width:1024px) {

    p,h6{
    font-size:90%;
}

    div.moose p,
    div.swedi p{
    font-size:80%;
}
}

footer{
    width:100%;
    padding:20px 0 35px;
    text-align:center;
    background:#FFF;
    border-top:solid 1px #000;
}

footer div.next{
    width:500px;
    height:auto;
    margin:0 auto 1.5em;
}

footer div.next a img{
    width:100%;
}

footer div.next a{
    transition:1s;
}

footer div.next a:hover{
    opacity:0.5;
}

footer copyright{
    width:21.5%;
    margin:0.8em auto;
    display:inline-block;
}

footer copyright picture img{
    width:100%;
}

/* =======================================
	SMPH
======================================= */

@media screen and (max-width: 640px) {
    
    #sideArea{
        min-width:850px;
    }
    div.pageNavi{
    opacity:0;
}
    
}