@charset "UTF-8";

/* --------------------------------------------------------------
   Reset Base
   -------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
     /* Font */
    --font-main: "Noto Sans Thai", "Noto Sans JP", "Inter", sans-serif;
    --font-size: 17px;
    --font-line-height: 1.7;

     /* color */
    --c-text: #333;
  
}


/* 1) Box sizing modern reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2) Remove margin/padding default */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* 3) HTML base */
html, body {
    font-size: var(--font-size);
    font-family: var(--font-main);
    color: var(--c-text);
    line-height: var(--font-line-height)
}

/* 4) Display block for HTML5 elements */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display: block;
}

/* 5) List reset */
ul, ol { list-style: none; }

/* 6) Quotes reset */
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; }

/* 7) Anchor */
a {
    text-decoration: none;
    color: var(--c-main);
	transition: all .3s ease-out;
}
/*
a:visited{
	color:#999;
}
*/
a:hover {
    opacity: .7;
}

/* 8) Image */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    -ms-interpolation-mode: bicubic; /* IE fallback */
}

/* 9) Table */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 10) Clearfix modern */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 11) Utility Hover */
.hover:hover { opacity: 0.5; transition: all .3s ease-out;}
.hover2:hover { transform: scale(1.1); transition: all .3s ease-out;}
.hover3:hover { transform: scale(0.9); transition: all .3s ease-out;}


/* OTHER 
---------------------------------------------------------- */
/*

	--------
	youtube
	--------
	.youtube_box {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
	}
	.youtube_box .video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	--------
	scroll table
	--------
	<p class="swipe sp"><span>スワイプで左右に移動して確認してください。</span></p>	
	.scroll {
		 overflow: auto;
	}
	.scroll .tb_scroll {
		 width: 700px;
	}
	.swipe span {
		 background: url(common/images/common/ico_swipe.png) no-repeat left center;
		 background-size: 25px;
		 color: #555;
		 font-size: 80%;
		 padding: 7px 0 7px 35px;
	}
	
	--------
	Center position
	--------
	{
		position: absolute; 
		top: 50%;
		left: 50%; 
		transform: translate(-50%,-50%);		
	}
	
	--------
	Transition
	--------
	{
		transition: all .3s ease-out;
		
		transition: all .2s;
	}

*/