@charset "utf-8";

/* CSS Document */



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

	2023.04  No.196

    p03/ スウェーデンハウス紀行

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



/*---Text---*/



p,

ul li{

  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;

}



div.videoArea{

    width:80%;

}



.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;

}



h3{

    width:90%;

    margin:0 auto 3em;

}



h2 img,

h3 img{

    width:100%;

}



.titleArea p{

    text-align: center;

    margin:0 auto;

    animation-duration: 3s;

}



.tgt{

    width:90%;

    margin:0 auto 1em;

    position:relative;

}



div.conv{

    margin:0 auto 3em;

    position:relative;

}



div.step{

    margin:0 auto 5em;

    position:relative;

    animation-delay: 1s;

}



div.step h4{

    width:100%;

    margin-bottom:0.8em;

}



div.step h4 > img{

    width:100%;

}



div.step p{

    width:96%;

    margin:0 auto;

    line-height:1.6em;

}



div.column{

    background:#CEE4E3;

    border-radius:40px;

    padding:2.5em 0 2em;

}



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*/

#cont1-1{

    position:relative;

}



#cont1-1 span.anno{

    position:absolute;

    left:-2em;

    bottom:3em;

}



#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{

    width:100%;

    margin:2em auto 0;

}



#cont1-2 div.moose{

    position:relative;

    width:70%;

    margin:0 auto;

}



#cont1-2 div.moose img{

    width:24%;

    left:-13%;

    top:-2em;

}



#ill01 {

  position:relative;

   margin:0 auto 3em;

}



#ill01 img{

    width:70%;

}



#ill01 ul{

    position:absolute;

    width:45%;

    right:0;

    top:15%;

}



#ill01 ul p{

    font-weight:800;

}



#ill01 ul li{

    font-size:0.9em;

    line-height:1.3em;

    font-family: 'Zen Maru Gothic', sans-serif;

    font-weight:500;

    letter-spacing:0.1em;

    margin-bottom:0.5em;

}

/*cont1-3*/

#cont1-3{

    text-align: center;

}



#cont1-3 h5{

    display:inline-block;

    letter-spacing:0.1em;

}



/*cont1-4*/

#cont1-4{

}

#cont1-4 .moose{

    width:52%;

    margin-left:47%;

}

#cont1-4 .moose img{

    right:-4em;

    top:-2em;

}



#cont1-4 .swedi{

    width:52%;

    margin-top:-8em;

}

#cont1-4 .swedi img{

    left:-1em;

    top:-5em;

    transform: scale(-1, 1);

}



/*cont2*/



/*cont2-1*/

#cont2-1{

    width:80%;

    margin-bottom:0;

}



#cont2-1 div.moose{

    margin-left:15%;

}



#cont2-1 div.swedi{

    width:40%;

    margin:-2em 0 0 -3em;

}



#cont2-1 div.swedi img{

    width:60%;

    left:-5em;

    top:-4em;

}



/*cont2-2*/

#cont2-2{

    width:43%;

    margin-left:55%;

    margin-top:-5em;

    margin-bottom:0;

}



#cont2-3{

    width:43%;

    margin:0 0 20%;

}



/*ill02*/

#ill02{

    width:62%;

    position:absolute;

    right:-8%;

    top:50%;

    animation-iteration-count:6;

}



#ill02 > div{

    position:relative;

}



#ill02 > div img#ill02_f1{

    width:20%;

    position:absolute;

    left:2%;

    bottom:8%;

    animation-duration:0.5s;

    animation-iteration-count:6;

}

#ill02 > div img#ill02_f1b{

    width:25%;

    position:absolute;

    left:-4%;

    bottom:22%;

    animation-duration:0.5s;

    animation-iteration-count:6;

}



#ill02 > div img#ill02_f2{

    width:27.5%;

    position:absolute;

    right:32%;

    top:0;

    animation-delay:1s;

    animation-duration:0.8s;

    animation-iteration-count:5;

}



#cont2-4{

    width:74%;

}



#cont2-5{

    width:85%;

}



#cont2-5 div.moose{

    margin-left:50%;

    margin-top:-4em;

}



#cont2-5 div.moose img{

    right:-3em;

    top:-6em;

    width:40%;

}



/*cont3*/

#cont3-1{

    width:43%;

    position:absolute;

    left:0;

    top:0;

}



#cont3-1 p{

    width:77%;

    margin:0 0 0 1em;

}



#cont3-2{

    width:60%;

    margin-top:2em;

    margin-left:39%;

}



#cont3-3{

    width:90%;

    margin-top:-2.5em;

    margin-bottom:0;

}



#cont3-3 div.moose img{

    width:38%;

    right:-6em;

    bottom:2em;

}



#ill03{

    width:35%;

    position:relative;

    margin:0 0 0 18%;

}



#ill03 img#ill03_f1{

    width:30%;

    position:absolute;

    top:35%;

    left:3%;

    animation-delay: 0.5s;

}



#cont3-4{

    width:43%;

    margin:-20em 0 0 56%;

}



#cont3-5{

    margin:8em 0 0 3em;

}



#cont3-5 div.moose img{

    width:37%;

    left:-4em;

    top:-3em;

}



#cont3-6{

    width:47%;

    margin:-8em 0 0 52%;

}

#cont3-7{

    width:47%;

    margin:-9em 0 0 0;

    position:relative;

}



#cont3-6 h5 span,

#cont3-7 h5 span{

    font-size:12px;

    display:block;

}



#cont3-6 h5 span img,

#cont3-7 h5 span img{

    height:15px;

    width:auto;

}



#cont3-8{

    width:43%;

    margin:5em 0 3em 15%;

}



#cont3-8 p{

    width:96%;

    margin:0 auto;

    }



/*cont4*/

#cont4-1{

    width:43%;

    margin:0 0 0 56%;

}



#ill04{

    width:50%;

    position:absolute;

    left:0;

    top:0;

    z-index:11;

    animation-delay: 1s;

}



#ill04 > div{

    position:relative;

}



#ill04 > div img#ill04_f1{

    width:20%;

    position:absolute;

    left:3%;

    top:36%;

    animation-delay: 1.5s;

    animation-duration: 0.5s;

}



#cont4-2{

    width:80%;

    margin:7em auto 0;

}



#cont4-2 div.moose{

    margin:0 0 0 42%;

}



#cont4-2 div.moose img{

    width:38%;

    right:-3em;

    top:-4em;

}



#cont4-3{

    width:43%;

    margin:10em 0;

}



#ill05{

    width:100%;

    position:absolute;

    right:-120%;

    top:-8em;

}

#ill05 > div{

    position:relative;

}



#ill05 > div img#ill05_f1{

    width:28%;

    position:absolute;

    left:7%;

    top:8%;

    animation-delay: 1s;

}



#cont4-4{

    width:43%;

    margin:13em 0 16em 55%;

}



#ill06{

    width:115%;

    position:absolute;

    left:-120%;

    top:-3em;

    animation-delay: 1s;

}



/*cont5*/

#cont5-1{

    width:43%;

    margin:0 0 ;

}



#ill07{

    width:42%;

    position:absolute;

    right:5%;

    top:-4em;

    z-index:11;

    animation-delay: 1s;

}



#cont5-2{

    width:80%;

    margin:2em auto 0;

}



#cont5-2 div.moose img{

    width:38%;

    left:-15%;

    bottom:-1em;

}



#cont5-3{

    width:80%;

    margin:-3em 0 0 ;

    position:relative;

}



#cont5-3 h5,

#cont5-3 p{

    width:80%;

    margin:1em 0 0 5%;

}



#cont5-3 img.p_column{

    width:32%;

    position:absolute;

    right:-23%;

    top:3em;

}



#cont5-4{

    width:90%;

    margin-top:3em;

}



#cont5-4 div.swedi{

    margin:0 0 0 50%;

}



#cont5-4 div.swedi img{

    left:-12%;

    bottom:-1em;

    transform:scale(-1, 1);

}



/*cont6*/

#cont6-1{

    width:43%;

    margin:5em 0 8em 56%;

}



#ill08{

    width:45%;

    position:absolute;

    left:5%;

    top:-2em;

    z-index:11;

}



#ill08 > div{

    position:relative;

}



#ill08 > div img#ill08_f1{

    width:27%;

    position:absolute;

    left:0;

    top:0;

    animation-duration: 0.2s;

    animation-delay: 0.5s;

}

#ill08 > div img#ill08_f2{

    width:27%;

    position:absolute;

    right:0;

    top:0;

    animation-duration: 0.2s;

    animation-delay: 1s;

}

#ill08 > div img#ill08_f3{

    width:26%;

    position:absolute;

    right:20%;

    bottom:0;

    animation-duration: 0.2s;

    animation-delay: 1s;

}



#cont6-2{

    width:43%;

    margin:15em 0 5em 0;

}



#cont6-2 img.p_column{

    width:35%;

    position:absolute;

    right:-25%;

    top:-2.5em;

}



#cont6-3{

    width:70%;

    margin-top:-15em;

    margin-left:20%;

}



#cont6-3 div.swedi{

    margin:0 0 0 50%;

}



#cont6-3 div.swedi img{

    width:38%;

    right:-18%;

    bottom:-3em;

}



/*まとめ*/

#matome{

    position:relative;

    margin:5em auto;

}



#matome p{

    width:70%;

    margin-left:25%;

}



#matome h6#sum{

    width:32%;

    position:absolute;

    left:-4em;

    top:-1em;

}



/*矢印*/

div.arw{

    display:block;

    position:absolute;

    z-index:10;

}



div.arw img{

    width:100%;

}



#arw01{

    width:32%;

    left:-50%;

    bottom:1.5em;

    z-index:11;

}

#arw02{

    width:12%;

    left:23%;

    bottom:-2.5em;

}

#arw02 img{

    transform:rotate(-10deg);

}



#arw03{

    width:15%;

    right:20%;

    top:5em;

}

#arw03 img{

    transform:scale(-1, 1);

}



#arw04{

    width:35%;

    right:-50%;

    bottom:-5.5em;

}

#arw04 img{

    transform:rotate(40deg);

}

#arw05{

    width:14%;

    right:25%;

    bottom:-1.5em;

}

#arw05 img{

    transform:rotate(-30deg);

}



#arw06{

    width:15%;

    left:8%;

    top:10em;

}



#arw07{

    width:26%;

    right:-20%;

    bottom:-15em;

}

#arw07 img{

    transform:rotate(-25deg);

}



#arw08{

    width:12%;

    right:36%;

    bottom:-16em;

}

#arw08 img{

    transform:rotate(35deg);

}



#arw09{

    width:13%;

    left:25%;

    bottom:-13em;

}



#arw10{

    width:30%;

    left:0;

    bottom:-14em;

}



#arw10 img{

    transform:rotate(35deg);

}



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;

}

    

}